jQuery实现统计表格列数据--海之澜
jQuery实现统计表格列数据--海之澜
jQuery代码如下：
<script type="text/javascript" language="javascript"> $(function () { var maxRowIndex = $("#tblGrid tbody tr:last").attr("rowindex"); if (maxRowIndex <= 0) { alert("统计数据出错，请联系管理员"); return; } var arr = ['优秀', '优良', '良好', '待改进', '不胜任']; var arrValue = [0, 0, 0, 0, 0]; for (var i = 1; i <= maxRowIndex; i++) { //取得列表值 var rowValue = $('.director_' + i).text().replace(/(\s*$)/g, "").replace(/(^\s*)/g, "").toString(); for (var j = 0; j < arr.length; j++) { //alert("--" + rowValue + "--"); //循环判断 if (rowValue == arr[j].toString()) { arrValue[j] += 1; break; } } } //赋值 for (var k = 0; k < 5; k++) { var arrRate = new Array(); arrRate[k] = (arrValue[k] / maxRowIndex * 100).toFixed(2); $('#num_' + k).html(arrValue[k]); $("#rate_" + k).html(arrRate[k]); } $("#totalNum").html(maxRowIndex); }); </script>
Html代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery实现统计表格列数据--海之澜</title> <script type="text/javascript" language="javascript" src="http://www.codefans.net/ajaxjs/jquery1.3.2.js"></script> <style> .header { width: 1000px; margin-left: auto; margin-right: auto; font-weight:bold; } .tblGrid { border-collapse: collapse; width: 1000px; border: 0; cellpadding: 0; cellspacing: 1; margin-left: auto; margin-right: auto; } .tblGrid thead tr td { color: #025aa4; background-color: #def3fc; height: 36px; font-size: 14px; font-weight: bold; text-align: center; } .tblGrid th, .tblGrid td { border: 1px solid #E1E1E1; text-align: center; } .hover { background-color: #5dd354; cursor: pointer; } .sorted { background-color: oldlace; } .clickable { text-decoration: underline; } </style> </head> <body> <table class="header"> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> jQuery实现统计表格列数据--海之澜 </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> </table> <table class="tblGrid" id="tblGrid"> <thead> <tr> <td style="width: 10%;" > 员工工号 </td> <td style="width: 10%;"> 员工姓名 </td> <td style="width: 15%;"> 职务名称 </td> <td style="width: 10%;"> 得分 </td> <td style="width: 10%;"> 绩效考核等级<br /> （直接主管） </td> <td style="width: 25%;"> 事例说明 </td> <td style="width: 10%;"> 绩效考核等级<br /> （上级主管） </td> <td style="width: 10%;"> 绩效考核等级<br /> （部门主管） </td> </tr> </thead> <tbody> <!--#RowBegin#--> <tr rowindex='1'> <td height="28px"> 0710 </td> <td> 张三 </td> <td> 客服支持 </td> <td> 100 </td> <td class="director_1"> 优秀 </td> <td> 李四 直接主管考评信息 </td> <td> 待改进 </td> <td> <select id="model_RANK_0" name="Table:model:RANK:0"> <option value="">-请选择-</option> <option value="优秀" >优秀</option> <option value="优良" >优良</option> <option value="良好" >良好</option> <option value="待改进" selected>待改进</option> <option value="不胜任" >不胜任</option> </select> </td> </tr> <tr rowindex='2'> <td height="28px"> 0085 </td> <td> 王五 </td> <td> 客服支持 </td> <td> 80 </td> <td class="director_2"> 优良 </td> <td> 事例说明 </td> <td> 优良 </td> <td> <select id="model_RANK_1" name="Table:model:RANK:1"> <option value="">-请选择-</option> <option value="优秀" >优秀</option> <option value="优良" selected>优良</option> <option value="良好" >良好</option> <option value="待改进" >待改进</option> <option value="不胜任" >不胜任</option> </select> </td> </tr> <tr rowindex='3'> <td height="28px"> 0712 </td> <td> 周氏 </td> <td> 客服支持 </td> <td> 70 </td> <td class="director_3"> 优秀 </td> <td> 直接主管考评信息 </td> <td> 优秀 </td> <td> <select id="model_RANK_2" name="Table:model:RANK:2"> <option value="">-请选择-</option> <option value="优秀" selected>优秀</option> <option value="优良" >优良</option> <option value="良好" >良好</option> <option value="待改进" >待改进</option> <option value="不胜任" >不胜任</option> </select> </td> </tr> <!--#RowEnd#--> </tbody> </table> <table class="header"> <tr> <td> </td> </tr> <tr> <td> 按绩效考核等级（直接主管）列统计 </td> </tr> <tr> <td> </td> </tr> </table> <table class="tblGrid" id="tblGridTwo" style=" width:40%; margin-left: auto;margin-right:auto;background-color: #ffffff"> <thead> <tr> <td style="width: 33%;"> 考核等级 </td> <td style="width: 33%;"> 人数 </td> <td style="width: 33%;"> 所占比例(%) </td> </tr> </thead> <tbody> <tr><td>优秀</td><td id="num_0"></td><td id="rate_0"></td></tr> <tr><td>优良</td><td id="num_1"></td><td id="rate_1"></td></tr> <tr><td>良好</td><td id="num_2"></td><td id="rate_2"></td></tr> <tr><td>待改进</td><td id="num_3"></td><td id="rate_3"></td></tr> <tr><td>不胜任</td><td id="num_4"></td><td id="rate_4"></td></tr> <tr><td>已完成人数</td><td id="totalNum"></td><td>100</td></tr> <tr><td>参加考核总人数</td><td></td><td>-</td></tr> </tbody> </table> </body> </html>
效果图：
