name - Selector donde la tabla td: contiene nulo en jquery
select name jquery (5)
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");
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í
Podrías probar esto
$("#row1 td:empty").css("background-color", "black");
Puede usar el :empty
selector de psuedo :empty
para buscar elementos que no tienen contenido:
$("#row1 td:empty").css("background-color", "black");
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;
}
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
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");
NOTA: contiene ('''') se acumulan todos los nodos, debe utilizar @Rory McCrossan Post, eso es bueno