js 动态指定 table 各行样式

表格行背景色动态设置

最新推荐文章于 2023-06-13 11:36:08 发布

原创最新推荐文章于 2023-06-13 11:36:08 发布 · 2.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#table #function

本文介绍了一种使用JavaScript根据表格中特定单元格的内容来动态改变行背景色的方法。通过简单的条件判断，实现不同内容对应不同颜色显示的效果，增强数据的可读性和直观性。

1. 写好样式这里指定了2个颜色

tr .BgColor{
background-color:#FF0;
}
tr .BgColor1{
background-color:#ffffff;
}

2. 写 js

window.onload=function(){    // 定义一个页面加载事件
var rows=document.getElementById('rows').value; //    这里我写了一个 hidden 里面赋了一个总行数的值获取出来
for(i=1;i<=rows;i++){     // 开始循环

var name=document.getElementById('table1').rows[i].cells[6].innerHTML;    // 得到表格第 i 行   第 6+1 列的值
if(name=='负面'){   //如果name是负面   的话
document.getElementById('table1').rows[i].className="BgColor";    //指定当前航为此样式
}else{
document.getElementById('table1').rows[i].className="BgColor1";   //指定当前航为此样式

}

}

}