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

你可以试试这个：

：空伪选择器将从所选行中选择空的td元素。您可以参考此updated jsfiddle。

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

希望它足够清楚1

Answer 2

您可以使用: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 3

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

$("#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 4

你能试试吗

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

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

注意：包含（＆＃39;＆＃39;）累积所有节点，你必须使用@Rory McCrossan Post，这很好

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

5 个答案: