您的位置：首页 > Web前端 > JQuery

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

2014-10-04 13:50 495 查看
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航