在表格中如何让数据不同所在行显示不同颜色
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在表格中如何让数据不同所在行显示不同颜色相关的知识，希望对你有一定的参考价值。
如图所示，B这一类，B2-B7是一样的数据，然后显示同一个颜色，然后B7跟B8数据不一样，然后显示另一种颜色，然后B8-B14是一样的数据显示同一个颜色，以此类推下来
=MOD(INT(SUMPRODUCT(1/COUNTIF($B$1:$B1,$B$1:$B1))),2)
设置格式：填充黄色。 参考技术A 你发文件来这个可以处理的 参考技术B 利用条件格式来做。追问
我知道用条件格式，但是具体是怎么用法
设计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>
以上是关于在表格中如何让数据不同所在行显示不同颜色的主要内容，如果未能解决你的问题，请参考以下文章