javascript - 如何仅在 html 表格中未设置背景时更改背景颜色

Question

下表列出了一些类型的类。 我想通过单击更改单元格 1 和 2 的颜色，这意味着仅当每个单元格中未设置背景颜色时才会更改颜色。

有什么方法吗？谢谢

$(function() {
  $("td").click(function() {
    $(this).css('background-color','yellow');
  });
});

#aqua {
    border-bottom: 3px solid aqua;
}
#green {
    background-color:green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<td id="1">1</td>
<td id="aqua">2</td>
<td id="green">3</td>
</table>

Answer 1

您可以添加类，赋予其background:yellow 样式。这样，每当 id 给它任何其他颜色时，id 选择器样式将获得优先级，尽管类；

$(function() {
  $("td").click(function() {
    $(this).addClass('default-yellow');
  });
});

#aqua {
    border-bottom: 3px solid aqua;
}
#green {
    background-color:green;
}
.default-yellow {
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<td id="1">1</td>
<td id="aqua">2</td>
<td id="green">3</td>
</table>