Selector where table td: contains null in jquery

Question

I have a table to display a somewhat 'timetable':

+------------------------------------------+                     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

which is made up using:

<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>

I am then using the script to create a colour co-ordination for each item:

<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>

However, when this is executed, ALL cells are coloured black (I only want black to appear when cell in this table is empty, no other reason).

this JSFIDDLE shows what I want it to be like. (excluding the use of making empty cells black in this table)

this JSFIDDLE shows what i'm getting if i include the last line of my script

---

So with whole table: this will be a design for end result, obviously without hard coding the background color.

---

EDIT

So, I've had plenty of guidance on the pseudo element :empty, which has been very helpful.

However, it doesn't quite work the way i expected it to, (as the last column 'etc' is, in my opinion, also 'empty', but never gets filled black:

So I end up with:

+------------------------------+
|    |    |    |    |    |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'

As shown here

Answer 1

You can try this :

:empty pseudo selector will select empty td elements from the selected row. You can refer this updated jsfiddle.

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

Hope it is clear enough 1