html - Selector where table td: contains null in jquery -

i have table display 'timetable':

+------------------------------------------+                     key: |name 00:00  00:20  00:40  01:00  01:20 etc            xxxxxxx 'itema' |item xxxxxxxxxxxx  yyyyyyyyyyyyyyyyyyy                yyyyyyy 'itemab' |item yyyyyyyyyyyyyyyyyyy  xxxxxxxxxxxx                zzzzzzz 'itemabc' |item ------------  zzzzzzzzzzzz  xxxxx                ------- null/blank 

which made 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 using script create colour co-ordination 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 executed, cells coloured black (i want black appear when cell in table empty, no other reason).

this jsfiddle shows want like. (excluding use of making empty cells black in table)

this jsfiddle shows i'm getting if include last line of script

---

so whole table: this design end result, without hard coding background color.

---

edit

so, i've had plenty of guidance on pseudo element :empty, has been helpful.

however, doesn't quite work way expected to, (as last column 'etc' is, in opinion, 'empty', never gets filled black:

so end with:

+------------------------------+ |    |    |    |    |    |etc  |                       +------------------------------+ |    |    itema     |  b |                  +------------------------+ |    |    itemb     |  |       <-- section here 'part' of table         +------------------------+           never physically 'defined' using <td>  |    |?|?|?|?|?| c  ||?|?|           tag       +------------------------+        ^                      ^                  |                      |        |                       \       black background           there way of making 'undefined'       (as wanted)                section appear being ':empty'                                  , hence have 'background: black' 

as shown here

you can use :empty psuedo selector find elements have no content:

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

updated fiddle

note amended fiddle work on rows of table can see states.

---

to achieve require in update set default background colour on table element, , set td , th have normal background colour. need remove borders though, otherwise table background show through. can worked around using padding increase gutters between cells. this:

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

updated fiddle