表 td：在 jquery 中包含 null 的选择器

Question

我有一个表格来显示一些“时间表”：

+------------------------------------------+                     KEY:
|NAME 00:00  00:20  00:40  01:00  01:20 etc            XXXXXXX is actually 'itemA'
|item XXXXXXXXXXXX  YYYYYYYYYYYYYYYYYYY                YYYYYYY is actually 'itemAB'
|item YYYYYYYYYYYYYYYYYYY  XXXXXXXXXXXX                ZZZZZZZ is actually 'itemABC'
|item ------------  ZZZZZZZZZZZZ  XXXXX                ------- is actually null/blank

由以下组成：

<table>
   <tr>
      <th>NAME</th><th>00:00</th><th>00:20</th><th>00:40</th><th>01:00</th><th>01:20</th><th>etc</th>
   </tr>
   <tr id="row1">
      <th>item</th>
      <td colspan="2">itemA</td>
      <td colspan="3">itemAB</td>
   </tr>
   <tr>
      <th>item</th>
      <td colspan="3">itemAB</td>
      <td colspan="2">itemA</td>
    </tr>
   <tr>
      <th>item</th>
      <td colspan="2"></td>
      <td colspan="2">itemABC</td>
    </tr>
</table>

然后我使用脚本为每个项目创建颜色协调：

<script>
    $("#row1 td:contains('itemA')").css("background-color", "lightBlue");
    $("#row1 td:contains('itemAB')").css("background-color", "yellow");
    $("#row1 td:contains('itemABC')").css("background-color", "lightGreen");
    $("#row1 td:contains('')").css("background-color", "Black");
</script>

但是，执行此操作时，所有单元格都涂成黑色（我只想在此表中的单元格为空时出现黑色，没有其他原因）。

这个JSFIDDLE 展示了我想要的样子。 （不包括在本表中将空单元格变黑）

这个JSFIDDLE 显示了如果我包含脚本的最后一行会得到什么

---

所以对于整个表：this will be a design for end result，显然没有硬编码背景颜色。

---

编辑

所以，我有很多关于伪元素:empty 的指导，这非常有帮助。

但是，它并没有像我预期的那样工作，（在我看来，最后一列“等”也是“空的”，但永远不会被填充为黑色：

所以我最终得到：

+------------------------------+
|    |    |    |    |    |ETC  |                      
+------------------------------+
|    |    itemA     |  B |                 
+------------------------+
|    |    itemB     |  A |       <-- this section here is 'part' of the table        
+------------------------+           but never is physically 'defined' using a <td> 
|    |?|?|?|?|?| C  ||?|?|           tag      
+------------------------+
       ^                      ^          
       |                      |
       |                       \
      black background           is there a way of making this 'undefined'
      (as wanted)                section also appear as being ':empty'
                                 and hence have a 'background: black'

如图here

Answer 1

您可以使用:empty psuedo 选择器来查找没有内容的元素：

$("#row1 td:empty").css("background-color", "black");

Updated fiddle

请注意，我修改了小提琴以适用于表格的所有行，以便您可以查看所有状态。

---

要实现您在更新中的要求，您可以在table 元素上设置默认背景颜色，然后将td 和th 设置为具有正常背景颜色。不过，您需要删除边框，否则表格背景将显示出来。这可以通过使用一些填充来增加单元格之间的间距来解决。像这样的：

table {
    background-color: black;
    border-collapse: collapse;
}
table th, 
table td {
    background-color: white;
    padding: 2px;
}

Updated fiddle

Answer 2

你可以试试这个

$("#row1 td:empty").css("background-color", "black");

Answer 3

你可以试试这个：

:empty 伪选择器将从所选行中选择空的 td 元素。你可以参考这个updated jsfiddle。

$("#row1 td:empty").css("background-color", "Black")

希望够清楚 1

Answer 4

首先在所有单元格上设置黑色背景，然后寻找“特殊”单元格

$("#row1 td").css("background-color", "Black");        
$("#row1 td:contains('itemA')").css("background-color", "lightBlue");
$("#row1 td:contains('itemAB')").css("background-color", "yellow");
$("#row1 td:contains('itemABC')").css("background-color", "lightGreen");

Answer 5

简单就是把最后一行移到第一行

 $("#row1 td:contains('')").css("background-color", "Black");
    $("#row1 td:contains('itemA')").css("background-color", "lightBlue");
    $("#row1 td:contains('itemAB')").css("background-color", "yellow");
    $("#row1 td:contains('itemABC')").css("background-color", "lightGreen");

DEMO

注意：contains('') 是累积所有节点，你必须使用@Rory McCrossan Post，这很好