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

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

本次实现的功能包括：

/**

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

以下整体案例使用的简略的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) {
 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     }
 9 }
10 function initTableColor(tableHandle) {
11     $(tableHandle).zTableChangeColor();
12 }

调用

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 }

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

猜你喜欢