提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

jquery实现效果比较好的table选中行颜色

jQuery 实现 效果 jQuery 比较 Table 颜色 选中
2023-06-13 09:15:24 时间
jquerytable选中行颜色(效果更好)
复制代码代码如下:

<html>
<head>
<styletype="text/css">
.table-tr-title{
height:26px;
font-size:12px;
text-align:center;
}
.table-tr-content{
height:18px;
background:#FFFFFF;
text-align:center;
font-size:12px;
}
.normalEvenTD{
background:#DFD8D8;
}
.normalOddTD{
background:#FFFFFF;
}
.hoverTD{
background-color:#eafcd5;
height:18px;
text-align:center;
font-size:12px;
}
.trSelected{
background-color:#51b2f6;
height:18px;
text-align:center;
font-size:12px;
}
</style>
</head>
<body>
<tablewidth="99%"class="list"style="word-break:break-all"border="0"
align="center"cellpadding="0"cellspacing="1"bgcolor="#c0de98">
<trclass="table-tr-title">
<tdwidth="5%">标题</td>
<tdwidth="5%">标题</td>
<tdwidth="5%">标题</td>
<tdwidth="5%">标题</td>
</tr>
<trclass="table-tr-content">
<tdwidth="5%">数据</td>
<tdwidth="5%">数据</td>
<tdwidth="5%">数据</td>
<tdwidth="5%">数据</td>
</tr>
<trclass="table-tr-content">
<tdwidth="5%">数据</td>
<tdwidth="5%">数据</td>
<tdwidth="5%">数据</td>
<tdwidth="5%">数据</td>
</tr>
<trclass="table-tr-content">
<tdwidth="5%">数据</td>
<tdwidth="5%">数据</td>
<tdwidth="5%">数据</td>
<tdwidth="5%">数据</td>
</tr>
<trclass="table-tr-content">
<tdwidth="5%">数据</td>
<tdwidth="5%">数据</td>
<tdwidth="5%">数据</td>
<tdwidth="5%">数据</td>
</tr>
<trclass="table-tr-content">
<tdwidth="5%">数据</td>
<tdwidth="5%">数据</td>
<tdwidth="5%">数据</td>
<tdwidth="5%">数据</td>
</tr>
<trclass="table-tr-content">
<tdwidth="5%">数据</td>
<tdwidth="5%">数据</td>
<tdwidth="5%">数据</td>
<tdwidth="5%">数据</td>
</tr>
<trclass="table-tr-content">
<tdwidth="5%">数据</td>
<tdwidth="5%">数据</td>
<tdwidth="5%">数据</td>
<tdwidth="5%">数据</td>
</tr>
<trclass="table-tr-content">
<tdwidth="5%">数据</td>
<tdwidth="5%">数据</td>
<tdwidth="5%">数据</td>
<tdwidth="5%">数据</td>
</tr>
<trclass="table-tr-content">
<tdwidth="5%">数据</td>
<tdwidth="5%">数据</td>
<tdwidth="5%">数据</td>
<tdwidth="5%">数据</td>
</tr>
<trclass="table-tr-content">
<tdwidth="5%">数据</td>
<tdwidth="5%">数据</td>
<tdwidth="5%">数据</td>
<tdwidth="5%">数据</td>
</tr>
<trclass="table-tr-content">
<tdwidth="5%">数据</td>
<tdwidth="5%">数据</td>
<tdwidth="5%">数据</td>
<tdwidth="5%">数据</td>
</tr>
<trclass="table-tr-content">
<tdwidth="5%">数据</td>
<tdwidth="5%">数据</td>
<tdwidth="5%">数据</td>
<tdwidth="5%">数据</td>
</tr>
</body>
</html>

js代码：
复制代码代码如下:

<scripttype="text/javascript"src="jquery-1.6.4.js"></script>
<script>
$(function(){
///////datagrid选中行变色与鼠标经过行变色///////////////
vardtSelector=".list";
vartbList=$(dtSelector);

tbList.each(function(){
varself=this;
$("tr:even:not(:first)",$(self)).addClass("normalEvenTD");//从标头行下一行开始的奇数行，行数：（1，3，5...）
$("tr:odd",$(self)).addClass("normalOddTD");//从标头行下一行开始的偶数行，行数：（2，4，6...）

//鼠标经过的行变色
$("tr:not(:first)",$(self)).hover(
function(){$(this).addClass("hoverTD");$(this).removeClass("table-td-content");},
function(){$(this).removeClass("hoverTD");$(this).addClass("table-td-content");}
);

//选择行变色
$("tr",$(self)).click(function(){
vartrThis=this;
$(self).find(".trSelected").removeClass("trSelected");
if($(trThis).get(0)==$("tr:first",$(self)).get(0)){
return;
}
$(trThis).addClass("trSelected");
});
});
});
</script>

效果显示：

相关文章