如何使表格行背景颜色覆盖单元格输入元素背景颜色？

Question

当用户单击表格行时，我将以下类应用于行

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

但是，单元格中的输入背景颜色会覆盖行的背景颜色。 （例如，在附图中，第一行和第三行被选中。第一行，单元格一和三个输入用黄色覆盖行背景。）

我希望行的背景颜色在选中时成为主要颜色，覆盖行内表格单元格输入的颜色。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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，请在覆盖此属性的cell属性之后定义此属性。