css table移动背景色

CSS表格是我们在网页中经常使用的元素之一，而改变表格行或列的背景色也是比较常见的需求。下面我们就来介绍一下如何使用CSS来实现表格行或列的背景色移动效果。

.table {
  border-collapse: collapse;
  width: 100%;
}

.table td {
  padding: 10px;
}

.table tr:nth-child(even) {
  background-color: #f2f2f2;
}

.table tr:nth-child(odd) {
  background-color: #ddd;
}

.table tr.activeRow {
  background-color: #ffa;
}

上面是一个简单的CSS表格样式，其中设置了表格的边框合并和行列的内边距。同时，使用了:nth-child伪类来给偶数行和奇数行分别设置背景色，使表格更美观。

接下来，我们通过JavaScript来实现表格的移动效果。

var rows = document.getElementsByTagName('tr');

for (var i = 1; i 

在JavaScript中，我们通过遍历所有行元素并为其添加事件监听器来实现点击行时将其背景色变为黄色的效果。具体地，在点击行时，我们先将当前已激活行的背景色去除，然后为被点击的行元素添加.activeRow类名，从而使其背景色变为黄色。

以上就是对CSS表格移动背景色的简单介绍，希望这篇文章能帮助到大家。