-
使用JS修改表格行的背景色，产生隔行变色的效果，鼠标移上去的时候这一行变成其它颜色，移出去的时候还原成之前的背景色。
-
创建三个类样式，分别用于设置背景色为浅红，浅黄，浅绿。
-
通过标签名得到所有的tr行
-
在窗体加载完毕的事件中遍历所有的行，如果是偶数，则设置它的背景色为浅黄色，否则为浅红色
-
设置鼠标在上面和在外面的事件，鼠标在上面的事件中，记录没有换颜色之前的颜色，再设置类样式为浅绿色。设置一个全局变量记录之前的类样式名。
-
如果鼠标移出之后，要回到原来的颜色，将全局变量记录的样式名赋值给当前行的类样式名。
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>使用JS修改表格行的背景色</title>
<style type="text/css">
table {
margin: auto;
border‐collapse: collapse;
tr {
text‐align: center;
height: 32px;
.redStyle {
background: lightpink;
.yellowStyle {
background: lightyellow;
.greenStyle {
background: lightgreen;
</style>
<script type="text/javascript">
var color = "";
window.onload = function () {
var trNodes = document.getElementsByTagName("tr");
for (var index = 1; index < trNodes.length; index++) {
if (index % 2 == 0) {
trNodes[index].className = "yellowStyle";
} else {
trNodes[index].className = "redStyle";
trNodes[index].onmouseover = function () {
color = this.className;
this.className = "greenStyle";
trNodes[index].onmouseout = function () {
this.className = color;
</script>
</head>
<table id="tab1" border="1" width="800" align="center">
<tr style="background‐color: #ccc;">
<th>分类ID</th>
<th>分类名称</th>
<th>分类描述</th>
<th>操作</th>
<td>1</td>
<td>手机数码</td>
<td>手机数码类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</table>
</body>
</html>
代码如下:<html> [removed] //点击当前选中行的时候设置当前行的颜色，同时恢复除当前行外的行的颜色及鼠标事件 function selectRow(target) { var sTable = document.getElementById(“ServiceListTable”) for(var i=1;i<sTable.rows.length;i++) //遍历除第一行外的所有行 { if (sTable.rows[i] != target) //判断是否当前选定行 { sTable.r
function setTrBg(){
//先获取页面表格的属性 table
var table=document.getElementsByTagName("table")[0];
var trs=table.getElementsByTagName("tr");
for(var i=0;i<trs.length;i++){
//置空背景颜色
trs[i].style.background="";
//设置背景颜色
trs[i].style.background="#.
html代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<link rel="stylesheet" type="text/css" href="../extjs3/resources/css/ext-all.css" rel="external nofollow" />
<script type="text/javascript" src="../extjs3/adapter/e
// 获取元素
var table = document.getElementById("hz1"),
rows = table.getElementsByTagName("tr");
今天被“刀”了一整天，身心俱疲……老是在最后1毛钱上做文章的PDD是多么的可恶……虽然，我的微信通讯录里的人也被我“刀”了个遍，好想跟他们说：“是兄弟你就来砍我！！！一刀 ￥0.01” ，最后还得拉个新人……K.F.C
距离卸载 PDD 还有……
文章目录误会疑问宏名养成注释的习惯不要偷懒性能吃紧能不for就不forwps js宏能用的 JS 库多录制点宏录制的宏并不总是可用加载项最好选择在线发布保证离线可用加载项的限制不要过多占用软件菜单 Tab 区局域网内使用能被称当成宏的只有 function代码.
本文实例讲述了js点击列表文字，实现该行文字显示背景颜色的方法。分享给大家供大家参考。具体如下：
JS控制li,鼠标点击时class自动加上，给列表文字产生自己喜欢的背景色的网页特效。
运行效果图如下：
<style type="text/css">
li{cursor:pointer;}
.cur{background:red;}
</style>
[removed]
[removed] = function ()
var aLi = document.getElementsByTagName("li");
var i =
while(i <= ActiveW.Selection.Cells.Count)
{//表格的表头颜色填充
ActiveW.Selection.Cells.Item(i).Shading.BackgroundPatternColor = wdColorGray15;
尝试着以行为单位进行设置，但是设置无效，仅以单元格为单位进行填充可行。
可能是WPS自身问题导致。
提供表格数据的许多站点使用交替的背景色来增加该数据的可读性。 在开发网站时，我意识到我也想这样做。 问题？ 在我的情况下，该表不是由服务器端应用程序或脚本生成的，您可以在Web上找到大量示例。
显而易见的解决方案是对第二行进行硬编码，以确保其具有不同的背景色。 但是我希望表是动态的，以便可以在表中间添加新行，而无需更改后面各行的背景颜色属性。
我的解决方案使用JavaScript，因为C...
1. 记录原背景色，可以通过获取该行元素的style属性中的background-color属性值来获取。
2. 使用layui的表格渲染完成后，通过jQuery或原生JavaScript获取到指定id表格中需要修改背景色的行元素。
3. 修改该行元素的style属性中的background-color属性值为需要的颜色。
4. 当需要还原该行元素的背景色时，将该行元素的background-color属性值设置为之前记录的原背景色即可。
示例代码：
```javascript
// 记录原背景色
var originalColor = $('#tableId tr:eq(1)').css('background-color');
// 修改背景色
$('#tableId tr:eq(1)').css('background-color', 'red');
// 还原原背景色
$('#tableId tr:eq(1)').css('background-color', originalColor);
其中，`#tableId`为需要操作的表格的id，`tr:eq(1)`为需要修改背景色的行元素，可以根据实际情况进行修改。
