colonne della tabella Selezione (jQuery)
-
18-09-2019 - |
Domanda
Voglio dare tutto (compreso <th>
) cellule di FIRST e colonne ULTIMI alcune classi specifiche, ho provato questo:
$("table tr:first-child td:first-child").addClass("first-col-cell");
$("table tr:last-child td:last-child").addClass("last-col-cell");
.. ma non sembra funzionare.
Apprezzerebbe alcun aiuto.
Soluzione
EDIT: Il tuo selettore era abbastanza vicino:
<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>
Altri suggerimenti
Se gli elementi th
importa ... non so come ci si vuole trattare colspans sia.
<!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>
Prova scomponendola un po ', l'attraversamento che stai facendo è corretto
// 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");
Poi abbiamo solo bisogno di assicurarsi che il mark up è tutto buono
<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 poi jQuery dovrebbe passare attraverso ogni uno con i seguenti risultati
<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>
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow