表格隔行换色就是表格行间隔行用不同颜色表示,便于信息浏览,同时具有鼠标经过行高亮效果.
传统的方法是在表格的行元素里写入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
相关文章：
-
2022-12-23
-
2021-10-21
-
2022-02-15
-
2021-10-31
-
2021-08-07
-
2021-06-11
-
2022-12-23
-
2022-12-23
猜你喜欢
-
2021-11-02
-
2022-01-16
-
2021-11-18
-
2022-12-23
-
2021-11-14
-
2022-12-23
-
2022-12-23
相关资源
-
下载
2022-12-21
-
下载
2021-06-05
-
下载
2023-01-29
-
下载
2023-02-03
-
下载
2023-01-09