table隔行变色与table单元格根据条件更改字体颜色 

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

 

posted @ 2019-07-27 17:16  袁浩178  阅读(1463)  评论(0)    收藏  举报