jquery 實現表格奇數偶數行顏色不一樣 ，可以實現不同的效果，區分奇數偶數行
阿新 • • 發佈：2019-02-02
<!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>
<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>