如何使表格行背景色覆蓋單元格輸入元素的背景色？

Question

當用戶單擊表行時，我將以下類應用於行

tr.selected {
background-color:#FFA76C;
}

但是，單元格中具有背景色的輸入會覆蓋該行的背景色。 （例如，在所附圖片中，選擇了第一行和第三行。第一行，單元格一和三個輸入正用黃色覆蓋行背景。）

我希望該行的背景色在被選中時成為主要顏色，從而覆蓋該行內部的表格單元格輸入的顏色。

 function selectRow(row) { if (row.className.indexOf("selected") != -1) { row.className = row.className.replace("selected", ""); } else { row.className += " selected"; } } 

 tr.selected{ background-color:#FFA76C; } 

 <table> <tbody> <tr class="selected" style="height: 20px;"> <th align="left" style="font-size:11px;border:1px solid grey;padding-bottom: 3px;white-space: nowrap;" onclick="selectRow(this.parentNode);"><div style="width:15px"></div> </th> <td align="left" style="font-size:11px;border:1px solid grey;height: 20px;overflow: hidden; white-space: nowrap;"> <input type="text" style="border: none; width: 150px; height: 100%; text-align: center; overflow: hidden; background: rgb(255, 255, 0);"> </td> <td align="left" style="font-size:11px;border:1px solid grey;height: 100%;overflow: hidden;align: left; white-space: nowrap;"><input type="text" style="border: none;width: 150px;height: 100%;text-align: center;overflow: hidden;background: transparent;"></td> <td align="left" style="font-size:11px;border:1px solid grey;width: 99%;overflow: hidden;"><input type="text" style="border: none; width: 100%; height: 100%; text-align: center; overflow: hidden; background: rgb(255, 255, 0);"></td> </tr> </tbody> </table> 

Answer 1

嘗試使用類似

tr.selected td, tr.selected th {
    background-color: transparent;
}

因此，表格行中th或td的bg顏色不會覆蓋tr顏色。
另外，您應該使用!important覆蓋內聯樣式（或避免使用內聯樣式，這更好）。

Answer 2

應用這個

tr.selected td {
    background-color:#FFA76C !important;
}

為了避免！important，請在要覆蓋此屬性的單元格屬性之后定義此屬性。