<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格隔行变色</title>
</head>
<script>
//表格隔行变色
function ColorTab() {
var tab=document.getElementById("tab")
var len=tab.rows.length;
for(var i=0;i<len;i++){
if(i%2==0){//判断行数为偶数的
tab.rows[i].style.backgroundColor="purple";
}
else{
tab.rows[i].style.backgroundColor="red";
}
}
}
//根据条件更改单元格字体颜色
function SetForeColor() {
var tab=document.getElementById("tab")
var row=tab.rows.length;//tab行数
var col=tab.rows[0].cells.length;//tab列数
for(var i=0;i<row;i++){
for(var j=0;j<col;j++){
if(tab.rows[i].cells[j].innerHTML==="22"){//判断单元格值等于22的单元格
tab.rows[i].cells[j].style.fontWeight="bold";//字体加粗，也可用数字表示100-900
tab.rows[i].cells[j].style.color="red";//字体颜色设置
// tab.rows[i].cells[j].style.font.fontcolor("purple");
}
}
}
}
</script>
<body onload="SetForeColor()">
<table id="tab" border="1px" width="500px" height="200px" >
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
<td>34</td>
</tr>
<tr>
<td>41</td>
<td>42</td>
<td>43</td>
<td>44</td>
</tr>
</table>
</body>
</html>
