After a user selects a table row, the row is assigned the class below:
tr.selected {
background-color:#FFA76C;
}
However, if there are input fields in the cells with background colors, they end up overriding the row's background color. (For instance, in the provided image, the first and third rows are selected. In the first row, the inputs in cells one and three override the row background with yellow.)
I aim for the row's background color to be more prominent when selected, overriding the color of the table cell inputs within the row.
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>