如何用jquery控制表格奇偶行及活动行颜色

前端技术 2023/09/08 JavaScript
虽然jquery流行已经很多年了，一直都感觉很难，也没有花时间去学习它，只是偶尔哪天心血来潮了去看一点点，时隔多日又会忘得一干二净。最近用到表格奇偶行不同色，不得不去再看jquery，虽然感觉还是难，但已经不像以前一样无从下手了。做完后不得不来感叹一下jquery真是太牛了，不用自己再写一大堆javascript函数去实现了，简单几句轻松搞定。

先定义好表格的奇偶行样式，如下代码：
复制代码 代码如下:

body {
font-size:12px;
}

th {
color: #FFFFFF;
background: #A172AC;
}

table,table td,table th {
padding: 0.5em;
margin: 0;
border:0;
border-spacing:0;
}
/* odd items 1,3,5,7,... */
table tbody tr.odd,
.odd {
background: #FBD106;
}

/* even items 2,4,6,8,... */
table tbody tr.even,
.even {
background: #E6453B;
}

/* hovered items */
.odd:hover,
.even:hover,
.hover {
background: #4BB747;
color: #FFFFFF;
}

再就是页面代码了：
复制代码 代码如下:

<!DOCTYPE html>
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<title>用jquery实现table奇偶行不同色</title>
<link href=\"style/mysql.css\" rel=\"stylesheet\" />
<script src=\"javascript/jquery-1.7.2.min.js\"></script>
<script language=\"javascript\" type=\"text/javascript\">
$(document).ready(function () {
//排除th标签，th可能是有自己特有的样式，所以定义th样式。
//$(\"tr:not(:has(th)):odd\").addClass(\"odd\");
//$(\"tr:not(:has(th)):even\").addClass(\"even\");
$(\"tr:odd\").addClass(\"odd\");
$(\"tr:even\").addClass(\"even\");
//如果CSS中不定义\".odd:hover\"和\".even:hover\"就需要toggleClass()。
/*
$(\"tr\").mouseover(function () {
$(this).toggleClass(\".hover\");
});
$(\"tr\").mouseout(function () {
$(this).toggleClass(\".hover\");
});
*/
});
</script>
</head>
<body>
<div id=\"outline\">
<table>
<tr id=\"tth\">
<th>data</th>
<th>data</th>
<th>data</th>
<th>data</th>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</table>
</div>
</body>
</html>

如果不需要鼠标事件，只需奇偶行不同色直接可以用CSS搞定。
复制代码 代码如下:

table tr:nth-child(even) td,
table tr:nth-child(even) th {
background-color: #FBD106;
}

table tr:nth-child(odd) td,
table tr:nth-child(odd) th {
background-color: #E6453B;
}

本文地址：https://www.stayed.cn/item/23021

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案