JS实现自定义工具类，隔行换色、复选框全选、隔行高亮等

很多功能都可以放在js的工具类中，在使用的时候直接调用

本次实现的功能包括：

/**

0.当点击表的整行的任意位置时，第一列的复选框或者单选框均选中 
1.隔行换色
2.复选框的全选效果
3.实现表格的高亮显示

4.计算输入了多少个字

*/

以下整体案例使用的简略的table代码HTML部分（未给出样式部分）：

<div class="form-group">
            <table  id="tabMain" class="formTable" style="width:350px;height:180px;">
                <thead>
                    <tr class="">
                        <td title="id"><input type="checkbox" id="checkall" onclick="checkAll(this);" ></td>
                        <td title="name"> 名称  </td>
                        <td title="hight"> 高度 </td>
                        <td title="weight"> 宽度 </td>
                        <td title="big"> 大小 </td>
                    </tr>
                </thead>
                <tbody>
                    <tr  style="width:400px;">
                        <td title="id"><input name="checkOne" type="checkbox" ></td>
                        <td title="name"> 矿泉水  </td>
                        <td title="hight"> 20 </td>
                        <td title="weight"> 10 </td>
                        <td title="big"> 500 </td>
                    </tr>
                    <tr  >
                        <td title="id"><input type="checkbox" name="checkOne"></td>
                        <td title="name"> 大象 </td>
                        <td title="hight"> 1810 </td>
                        <td title="weight"> 2220 </td>
                        <td title="big"> 10 </td>
                    </tr>
                    <tr  >
                        <td title="id"><input type="checkbox" name="checkOne"></td>
                        <td title="name"> 苹果  </td>
                        <td title="hight"> 11 </td>
                        <td title="weight"> 32 </td>
                        <td title="big"> 300 </td>
                    </tr>
            </tbody>
      </table>
  </div>

　　案例一： 当点击表的整行的任意位置时，第一列的复选框或者单选框均选中

 1 $.fn.zTableSelectBind = function(option) {
 2     var inputType = "checkbox";
 3     if(option && option.type) {
 4         inputType = option.type;
 5     }
 6     $(this).find("tbody tr").click(function(e) {
 7         var $obj = $(this).find("td:eq(0) input[type='" + inputType+ "']");
 8         var checked = $obj.prop("checked");
 9         $obj.prop("checked", !checked);
10     });
11 }
12
13 function initTableClick(tableHandle) {
14     $(tableHandle).zTableSelectBind();
15 }

使用的时候，直接传入表格的id调用：

1 function init() {
2     initTableClick("#tabMain");
3 }

案例二：隔行换色并且鼠标移入时高亮显示

 1 $.fn.zTableChangeColor = function(option,option1) {
 2     var trObj = $(this).find("tbody tr");
 3     if(trObj != 'undefined') {
 4         for(var i = 0; i < trObj.length; i++) {
 5             var color = i % 2 == 0 ? "#4479E" : "white";
 6             $(trObj[i]).attr("bgcolor", color);
 7
 8             trObj[i].onmouseover = function() {
 9                 this.setAttribute("bgc", this.style.backgroundColor);
10                 this.style.backgroundColor = "#A0B9E1";
11             }
12             trObj[i].onmouseout = function() {
13                 this.style.backgroundColor = this.getAttribute("bgc");
14             }
15         }
16     }
17 }
18 function initTableColor(tableHandle) {
19     $(tableHandle).zTableChangeColor();
20 }

调用

1 function init() {
2     initTableClick("#tabMain");
3     initTableColor("#tabMain");
4 }

案例三：复选框的全选效果

1 //实现复选框的全选效果
2 function checkAll(e) {
3     var checkOnes = document.getElementsByName("checkOne");
4     for(var i = 0; i < checkOnes.length; i++) {
5         checkOnes[i].checked = checkAllEle.checked;
6     }
7 }

案例四：计算输入了多少个字

1     function calculateChar() {
2         var sVal = $("#descript").val();
3         if(sVal.len > 256) {
4              sVal = sVal.substring(0.256);
5              $("#descript").val(sVal);
6         }
7      $("#charP").html(sVal.length);
8    }