<!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>