我遇到了一些关于制作表格 <td>/<th>
选择单元格的问题。
当选定单元格时,将使用background-color: rgba(51, 122, 183, 0.2) !important;
但它会替换原来的background-color:
CSS样式。
<td class="bg1 bg2"></td>
所以它可以在另一个层级的标签上工作,像这样
<tr class="bg1"> <td class="bg2"></td> </tr>
但是我不希望这样,因为我的工作中每个 td 都有不同的状态(class)
就像这里的一些例子一样
//DON'T focus
var td = document.getElementsByTagName("TD");
for (i = 0; i < td.length; i++)
td[i].onclick = doSomething;
function doSomething() {
this.classList.toggle("clicked")
}
table,
tr,
td {
border: 1px solid gray;
}
td{
width: 100px;
text-align: center;
}
.x {
/* td status can't change */
/*NON select BG*/
background-color: lightcyan;
}
.y {
/* td status can't change */
/*NON select BG*/
background-color: salmon;
}
.clicked {
/*selected BG*/
border: 1px double #4887C7;
background-color: rgba(51, 122, 183, 0.2) !important;
}
<table>
<tr>
<td class="x clicked">a</td>
<td class="y">b</td>
</tr>
<tr>
<td class="y clicked">c</td>
<td class="x">d</td>
</tr>
</table>
<hr> WHAT I need to be - but i want class x,y into td
<table>
<tr class="x">
<td class="clicked">a</td>
<td>b</td>
</tr>
<tr class="y">
<td class="clicked">c</td>
<td>d</td>
</tr>
</table>
我只想要两个 background-color:
混合在一起而不是替换掉其中一个
补充:我已经尝试过使用 filter:
,但对于白色背景不起作用