jQuery实现隔行换色;全选\反选\取消全选;点击当前行选中当前行的checkbox

1.  jQuery实现table隔行变色
2.  鼠标移上变色,
3.  另外还有全选 取消全选 反选

4.  点击当前行, 当前行的checkbox会被选中....

 

<script>
$(function(){
    //隔行改变背景色
    $("tr:odd").css("background-color", "#e5e5e5");
    //全选
    $("#selAll").click(function(){
        $(":checkbox").attr("checked", "checked");
    });
    //反选
    $("#selRev").click(function(){
        $(":checkbox").each(function(){
            $(this).attr("checked", !$(this).attr("checked"));
        });
    });
    //取消全选
    $("#selCancel").click(function(){
        $(":checkbox").attr("checked", "");
    });
    //选中当前行的checkbox
    $("tr:odd").each(function(){
        $(this).click(function(){
            var e = $(this).children("td").children(":checkbox");
            if(e[0].checked) {
                e.attr("checked", "");
            } else {
                e.attr("checked", "checked");
            }
        });
        $(this).hover(function(){
            $(this).css("background-color", "#FFE1FF");
        }, function(){
            $(this).css("background-color", "#e5e5e5");
        });
    })
    
    $("tr:even").each(function(){
        $(this).click(function(){
            var e = $(this).children("td").children(":checkbox");
            if(e[0].checked) {
                e.attr("checked", "");
            } else {
                e.attr("checked", "checked");
            }
        });
        $(this).hover(function(){
            $(this).css("background-color", "#FFE1FF");
        }, function(){
            $(this).css("background-color", "#fff");
        });
    })
    
    $(":checkbox").click(function(){
        $(this).attr("checked") ? $(this).attr("checked", false) : $(this).attr("checked", true);
    });
})
</script>