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

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

本次实现的功能包括：

/**

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

4.计算输入了多少个字

*/

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

<div class="form-group">
            <table  id="tabMain" class="formTable" style="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="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>

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

$.fn.zTableSelectBind = function(option) {
    var inputType = "checkbox";
    if(option && option.type) {
        inputType = option.type;
    }
    $(this).find("tbody tr").click(function(e) {
        var $obj = $(this).find("td:eq(0) input[type='" + inputType+ "']");
        var checked = $obj.prop("checked");
        $obj.prop("checked", !checked);
    });
}
    
function initTableClick(tableHandle) {
    $(tableHandle).zTableSelectBind();
}

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

function init() {
    initTableClick("#tabMain");
}

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

$.fn.zTableChangeColor = function(option,option1) {
    var trObj = $(this).find("tbody tr");
    if(trObj != 'undefined') {
        for(var i = 0; i < trObj.length; i++) {
            var color = i % 2 == 0 ? "#4479E" : "white";
            $(trObj[i]).attr("bgcolor", color);
            
            trObj[i].onmouseover = function() {
                this.setAttribute("bgc", this.style.backgroundColor);
                this.style.backgroundColor = "#A0B9E1";
            }
            trObj[i].onmouseout = function() {
                this.style.backgroundColor = this.getAttribute("bgc");
            }
        }
    }
}
function initTableColor(tableHandle) {
    $(tableHandle).zTableChangeColor();
}

调用

function init() {
    initTableClick("#tabMain");
    initTableColor("#tabMain");
}

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

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

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

    function calculateChar() {
        var sVal = $("#descript").val();
        if(sVal.len > 256) {
             sVal = sVal.substring(0.256);
             $("#descript").val(sVal);
        }
     $("#charP").html(sVal.length);
   }