table根据表格内的元素改变行颜色的javascript实现

最新推荐文章于 2025-06-23 18:07:50 发布

笛在月明

最新推荐文章于 2025-06-23 18:07:50 发布

阅读量1w

点赞数

CC 4.0 BY-SA版权

分类专栏：可视化文章标签： javascript

本文链接：https://blog.youkuaiyun.com/IqqIqqIqqIqq/article/details/51858869

可视化专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种使用JavaScript根据表格中特定列的数值范围为不同行背景自动应用颜色标记的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本例要实现的功能是根据表格第四列的数值划分的区间，分别赋予相应行以不同的颜色。

<script type="text/javascript">  
     function co(){   
    var table = document.getElementById("tab");
    var len = table.rows.length;
    var _row = table.rows;
    for(var i = 0;i < len;i++){
       var _cell = _row[i].cells;
       var d=_cell[3].innerHTML;
       if(d<3){
        table.rows[i].style.backgroundColor = "blue";
        }
       else if(d<18){
        table.rows[i].style.backgroundColor = "red";
        }
      else{
        table.rows[i].style.backgroundColor = "yellow";
        }
       }
    }
    </script>

html

<!DOCTYPE html>  
    <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">  
    <head>  
    <title>kingwell</title>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <style type="text/css">  
    html,body{font-family:Arial, Helvetica, sans-serif; font-size:12px}  
    table{ border-collapse:collapse}  
    td,th{padding:5px; border:1px solid #CCC; font-weight:lighter;}  
    th{ cursor:pointer}  
    </style> 
    </head>  
    <body onload="co()">  
    <table width="400"  id="tab">  
        <thead>  
            <tr>  
                <th width="100" onclick="kw.tabSort('tab',0)">First Name</th>  
                <th width="100" onclick="kw.tabSort('tab',1)">Last Name</th>  
                <th width="100" onclick="kw.tabSort('tab',2,'date')">Date</th>  
                <th width="100" onclick="kw.tabSort('tab',3,'int')">Int</th>  
            </tr>  
        </thead>  
        <tbody>  
      <tr>  
        <td>Kingwell</td>  
        <td>Leng</td>  
        <td>3/10/2012</td>  
        <td>1</td>  
      </tr>  
      <tr>  
        <td>1aJim</td>  
        <td>Green</td>  
        <td>3/5/2012</td>  
        <td>2</td>  
      </tr>  
      <tr>  
        <td>Kate</td>  
        <td>Bin</td>  
        <td>1/2/2012</td>  
        <td>3</td>  
      </tr>  
      <tr>  
        <td>Zte</td>  
        <td>Ri</td>  
        <td>5/3/2012</td>  
        <td>33</td>  
      </tr>  
      <tr>  
        <td>Bee</td>  
        <td>Dd</td>  
        <td>8/1/2012</td>  
        <td>15</td>  
      </tr>  
      </tbody>  
    </table>  
    </body>  
    </html>