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