name - Selector donde la tabla td: contiene nulo en jquery

select name jquery

Question

Tengo una tabla para mostrar un cierto ''calendario'':

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

que se compone de:

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

Entonces estoy usando la secuencia de comandos para crear una coordinación de color para cada elemento:

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

Sin embargo, cuando se ejecuta esto, TODAS las celdas son de color negro (solo quiero que aparezca el negro cuando la celda en esta tabla está vacía, no hay otra razón).

esta JSFIDDLE muestra lo que quiero que sea. (excluyendo el uso de hacer que las celdas vacías sean negras en esta tabla)

esta JSFIDDLE muestra lo que obtengo si incluyo la última línea de mi script

Entonces con toda la mesa: este será un diseño para el resultado final , obviamente sin una codificación dura del color de fondo.

EDITAR

Por lo tanto, he tenido mucha orientación sobre el pseudo elemento :empty , que ha sido muy útil.

Sin embargo, no funciona del modo que esperaba, (como la última columna "etc." es, en mi opinión, también "vacía", pero nunca se llena de negro:

Así que termino con:

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

Como se muestra aquí

Answer 1

Establezca primero un fondo negro en todas las celdas, luego busque las "especiales"

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

Podrías probar esto

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

Answer 3

Puede usar el :empty selector de psuedo :empty para buscar elementos que no tienen contenido:

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

Fiddle actualizado

Tenga en cuenta que modifiqué el violín para trabajar en todas las filas de la tabla para que pueda ver todos los estados.

Para lograr lo que necesita en su actualización, puede establecer un color de fondo predeterminado en el elemento de la table , y luego establecer el td y th para tener el color de fondo normal. Sin embargo, necesitarás quitar los bordes, de lo contrario se mostrará el fondo de la mesa. Esto puede solucionarse utilizando algo de relleno para aumentar los canales entre las celdas. Algo como esto:

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

Fiddle actualizado

Answer 4

Puedes intentar esto:

: el pseudo selector vacío seleccionará elementos td vacíos de la fila seleccionada. Puede referir este jsfiddle actualizado .

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

Espero que sea lo suficientemente claro 1

Answer 5

simple solo mueva la última línea a la línea del puño

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

MANIFESTACIÓN

NOTA: contiene ('''') se acumulan todos los nodos, debe utilizar @Rory McCrossan Post, eso es bueno