jquery 实现表格奇数偶数行颜色不一样，可以实现不同的效果，区分奇数偶数行

最新推荐文章于 2022-11-09 11:37:42 发布

pf1234321

最新推荐文章于 2022-11-09 11:37:42 发布

阅读量5.6k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/pf1234321/article/details/39779331

版权

js 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">

<script type="text/javascript" src="jquery-1.4.4.js"></script>

<script type="text/javascript">
/*
window.onload = function()
{
   var myTable = document.getElementById("table1");
    var myTBody = myTable.getElementsByTagName("tbody")[0];
    var myTrs = myTBody.getElementsByTagName("tr");

   for(var i = 0; i < myTrs.length; i++)
   {
       if(i % 2 == 0)
       {
           myTrs[i].style.backgroundColor = "red";
       }
       else
       {
           myTrs[i].style.backgroundColor = "blue";
       }
   }
}
*/
$(function()
{
   var aa = $("#table1 tbody tr:even");
   var aaa = $("#table1 tbody tr:odd");
   var a =   $("#table1 tbody tr");
   $("#table1 tbody tr:even").css('background', 'red');
   $("#table1 tbody tr:odd").css('background', 'blue');
});

</script>

</head>

<body>

<table id="table1" border="1" align="center" width="80%">

<tbody>

<tr><td>hello</td><td>hello</td><td>hello</td><td>hello</td></tr>
<tr><td>world</td><td>world</td><td>world</td><td>world</td></tr>
<tr><td>welcome</td><td>welcome</td><td>welcome</td><td>welcome</td></tr>
<tr><td>aaaaa</td><td>aaaaa</td><td>aaaaa</td><td>aaaaa</td></tr>

</tbody>

</table>

</body>
</html>