使用JQuery实现表格奇数行一个颜色，双数行一个颜色。
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用JQuery实现表格奇数行一个颜色，双数行一个颜色。相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title> new document </title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
$("#mytable").find("tr").css("background-color", "#bbffff");
$("#mytable").find("tr:odd").css("background-color", "#bbbbff");
);
</script>
</head>
<body>
<table border="1" cellpadding="10" id="mytable">
<tr><td>A</td><td>B</td><td>C</td></tr>
<tr><td>B</td><td>B</td><td>C</td></tr>
<tr><td>C</td><td>B</td><td>C</td></tr>
<tr><td>D</td><td>B</td><td>C</td></tr>
<tr><td>E</td><td>B</td><td>C</td></tr>
</table>
</body>
</html>
参考技术A
用子元素过滤
$("#tab tr:nth-child(even)").css("background-color","red"); //偶数行样式
$("#tab tr:nth-child(odd)").css("background-color","red"); //奇数行样式
HTML 一个HTML表格，使用CSS突出显示具有不同颜色的奇数行和偶数行 - 由W3Schools提供
<html>
<head>
<style type="text/css">
#customers
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width:100%;
border-collapse:collapse;
}
#customers td, #customers th
{
font-size:1em;
border:1px solid #98bf21;
padding:3px 7px 2px 7px;
}
#customers th
{
font-size:1.1em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#A7C942;
color:#ffffff;
}
#customers tr.alt td
{
color:#000000;
background-color:#EAF2D3;
}
</style>
</head>
<body>
<table id="customers">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr class="alt">
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr class="alt">
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr class="alt">
<td>Königlich Essen</td>
<td>Philip Cramer</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr class="alt">
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>Simon Crowther</td>
<td>UK</td>
</tr>
<tr class="alt">
<td>Paris spécialités</td>
<td>Marie Bertrand</td>
<td>France</td>
</tr>
</table>
</body>
</html>
以上是关于使用JQuery实现表格奇数行一个颜色，双数行一个颜色。的主要内容，如果未能解决你的问题，请参考以下文章
HTML 一个HTML表格，使用CSS突出显示具有不同颜色的奇数行和偶数行 - 由W3Schools提供
怎么让表格奇数行有颜色
jquery dataTables 插件可以在排序/过滤后尊重备用行颜色吗？
表格隔行变色以及鼠标移入高亮显示
用JS文件如何设置奇数表格行背景和偶数表格行背景
设计table表格，用js设计偶数行和奇数行显示不同的颜色