jquery - 选择器 where table td : contains null in jquery

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”也是“空的”，但永远不会被填充为黑色:

所以我最终得到:

+------------------------------+
|    |    |    |    |    |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 伪选择器将从所选行中选择空的 td 元素。可以引用这个updated jsfiddle .

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

希望它足够清楚 1