Selecionando colunas de tabela (jQuery)
-
18-09-2019 - |
Pergunta
Eu quero dar tudo (incluindo <th>
) células de primeira e última colunas algumas aulas específicas, tentei o seguinte:
$("table tr:first-child td:first-child").addClass("first-col-cell");
$("table tr:last-child td:last-child").addClass("last-col-cell");
.. mas parece não funcionar.
Apreciaria qualquer ajuda.
Solução
EDIT: Seu seletor estava bem próximo:
<script type="text/javascript">
$(function() {
$("table tr td:first-child").text('hello');
$("table tr td:last-child").text('goodbye');
});
</script>
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
Outras dicas
Se th
Os elementos são importantes ... não tenho certeza de como você gostaria de tratar os colsspans.
<!doctype html>
<table>
<tr>
<th></th>
<td>blah</td>
<td></td>
</tr>
<tr>
<td colspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
<td>blah</td>
<td></td>
</tr>
<tr>
<td></td>
<td>blah</td>
<td></td>
</tr>
</table>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("table tr :first-child").text('first').css('background', 'yellow');
$("table tr :last-child").text('last').css('background', 'brown');
});
</script>
Tente quebrá -lo um pouco, o atravessamento que você está fazendo está incorreto
// This will take the first child which is a TD, within any TR in the table.
$("table tr td:first-child").addClass("first-col-cell");
// This will take the first child which is a TR within the table.
$("table tr:first-child").addClass("first-col-cell");
// Just like the above, except now we're doing the last occurances
$("table tr td:last-child").addClass("last-col-cell");
$("table tr:last-child").addClass("last-col-cell");
Então precisamos apenas garantir que a marca seja boa
<table>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
E então o jQuery deve passar por cada um com os seguintes resultados
<table>
<tr class="first-col-cell">
<td class="first-col-cell">1</td>
<td>1</td>
<td>1</td>
<td class="last-col-cell">1</td>
</tr>
<tr>
<td class="first-col-cell">2</td>
<td>2</td>
<td>2</td>
<td class="last-col-cell">2</td>
</tr>
<tr class="last-col-cell">
<td class="first-col-cell">3</td>
<td>3</td>
<td>3</td>
<td class="last-col-cell">3</td>
</tr>
</table>
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow