表格隔行换色就是表格行间隔行用不同颜色表示,便于信息浏览,同时具有鼠标经过行高亮效果.
传统的方法是在表格的行元素里写入onmouseover和onmouseout两个属性，用后台语言或者别的判断行数是奇数还是偶数，变成不同的颜色。这样显得很麻烦
复选框的全选使用传统的js代码也可以实现，只是实现的过程相比Jquery稍显麻烦写。
使用Jquery只需要短短的几行代码就可以实现这个效果。
Css 代码
a{color:#000000; text-decoration:none;}
.sp {border-collapse:collapse; line-height:200%; font-size:12px}
.sp td{ text-align:center;}
.sp tr.alt td{background:#ecf6fc} /*这行将给所有偶数行加上背景色*/
.sp tr.over td{background:#FEF3D1; cursor:pointer;} /*这个将是鼠标高亮行的背景色*/
a{color:#000000; text-decoration:none;}
.sp {border-collapse:collapse; line-height:200%; font-size:12px}
.sp td{ text-align:center;}
.sp tr.alt td{background:#ecf6fc} /*这行将给所有偶数行加上背景色*/
.sp tr.over td{background:#FEF3D1; cursor:pointer;} /*这个将是鼠标高亮行的背景色*/
Javascript 代码
$(function(){
//隔行换色
$(".sp tr").mouseover(function(){
$(this).addClass("over");
}).mouseout(function(){
$(this).removeClass("over");
});
//鼠标划过
$(".sp tr:even").addClass("alt");
//复选框全选
$("#checkedAll").click(function() {
if ($(this).attr("checked") == true){$("[name='checkbox_ck']").attr("checked", true);}
else{$("[name='checkbox_ck']").removeAttr("checked");}
});
//链接复选框全选
$("#checkit").click(function() {
if ($("#checkedAll").attr("checked") == true){$("[name='checkbox_ck']").removeAttr("checked");$("#checkedAll").removeAttr("checked");}
else{$("[name='checkbox_ck']").attr("checked", true);$("#checkedAll").attr("checked", true);}
});
});
$(function(){
//隔行换色
$(".sp tr").mouseover(function(){
$(this).addClass("over");
}).mouseout(function(){
$(this).removeClass("over");
});
//鼠标划过
$(".sp tr:even").addClass("alt");
//复选框全选
$("#checkedAll").click(function() {
if ($(this).attr("checked") == true){$("[name='checkbox_ck']").attr("checked", true);}
else{$("[name='checkbox_ck']").removeAttr("checked");}
});
//链接复选框全选
$("#checkit").click(function() {
if ($("#checkedAll").attr("checked") == true){$("[name='checkbox_ck']").removeAttr("checked");$("#checkedAll").removeAttr("checked");}
else{$("[name='checkbox_ck']").attr("checked", true);$("#checkedAll").attr("checked", true);}
});
});
Html 代码
DEMO