我有一个表格来显示一些“时间表”:
+------------------------------------------+ 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
最佳答案
你可以试试这个:
:empty 伪选择器将从所选行中选择空的 td 元素。可以引用这个updated jsfiddle .
$("#row1 td:empty").css("background-color", "Black")
希望它足够清楚 1
关于jquery - 选择器 where table td : contains null in jquery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27167751/