设计table表格，用js设计偶数行和奇数行显示不同的颜色
Posted 闫平平
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了设计table表格，用js设计偶数行和奇数行显示不同的颜色相关的知识，希望对你有一定的参考价值。
第一种：鼠标经过时table表格中的颜色根据奇偶行改变不同的颜色
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript"> 7 function changeOver(elementId){ 8 //声明指定相关表元素 9 var table1 = document.getElementById("table1").children[0]; 10 //for循环语句 11 for(var i=0;i<table1.children.length;i++){ 12 //if判断语句 13 if(table1.children[i]==elementId){ 14 //奇数行 15 if(i%2==1) 16 //当鼠标覆盖到表格奇数行时，相关单元格背景色变为#CCCCCC色 17 elementId.style.background="red"; 18 //偶数行 19 else 20 //当鼠标覆盖到表格偶数数行时，相关单元格背景色变为#F2F2F2色 21 elementId.style.background="green"; 22 } 23 } 24 } 25 //当鼠标离开相关单元格时所触发的事件 26 function changeOut(elementId){ 27 //当鼠标离开相关表格相关行时，其相关行背景色变为#FFFFFF色 28 elementId.style.background="#FFFFFF"; 29 } 30 31 32 </script> 33 <style type="text/css"> 34 /*表格的样式*/ 35 table{ 36 width: 200px; 37 height: 400px; 38 border: 1px solid; 39 } 40 tr td{ 41 width: 100px; 42 height: 50px; 43 border: 1px solid; 44 } 45 </style> 46 </head> 47 <body> 48 <!--onmouseover鼠标经过时触发的函数，onmouseout鼠标离开时触发的函数--> 49 <table id="table1" > 50 <tr onmouseover="changeOver(this)" onmouseout="changeOut(this)"> 51 <td >1</td> 52 </tr> 53 <tr onmouseover="changeOver(this)" onmouseout="changeOut(this)"> 54 <td>2</td> 55 </tr> 56 <tr onmouseover="changeOver(this)" onmouseout="changeOut(this)"> 57 <td>3</td> 58 </tr> 59 <tr onmouseover="changeOver(this)" onmouseout="changeOut(this)"> 60 <td>4</td> 61 </tr> 62 <tr onmouseover="changeOver(this)" onmouseout="changeOut(this)"> 63 <td>5</td> 64 </tr> 65 <tr onmouseover="changeOver(this)" onmouseout="changeOut(this)"> 66 <td>6</td> 67 </tr> 68 <tr onmouseover="changeOver(this)" onmouseout="changeOut(this)"> 69 <td>7</td> 70 </tr> 71 <tr onmouseover="changeOver(this)" onmouseout="changeOut(this)"> 72 <td>8</td> 73 </tr> 74 75 </table> 76 </body> 77 </html>
第二种：直接用css发生改变，使用了伪类选择器nth-child
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*奇数改变的颜色*/
tr:nth-child(odd){background-color:#FFE4C4;}
/*偶数改变的颜色*/
tr:nth-child(even){background-color:#F0F0F0;}
/*table样式*/
table{
width: 200px;
height: 400px;
border: 1px solid;
}
/*tr.td的样式*/
tr td{
width: 100px;
height: 50px;
border: 1px solid;
}
</style>
</head>
<body>
<!--设计的一个简单表格-->
<table id="table1" >
<tr>
<td >1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr >
<td>6</td>
</tr>
<tr >
<td>7</td>
</tr>
<tr>
<td>8</td>
</tr>
</table>
</body>
</html>
以上是关于设计table表格，用js设计偶数行和奇数行显示不同的颜色的主要内容，如果未能解决你的问题，请参考以下文章
HTML 一个HTML表格，使用CSS突出显示具有不同颜色的奇数行和偶数行 - 由W3Schools提供
C# 如何撰写将一个Datatable的所有奇数行提取出来生成一个表，所有偶数行提取出来生成一个表？