2009-09-27 8 views
1

Je veux donner à tous (y compris <th>) cellules de première et dernières colonnes des classes spécifiques, j'ai essayé ceci:colonnes de la table de sélection (jQuery)

$("table tr:first-child td:first-child").addClass("first-col-cell"); 
$("table tr:last-child td:last-child").addClass("last-col-cell"); 

..mais il ne semble pas fonctionner.

J'apprécierais toute aide.

Répondre

1

EDIT: Votre sélection était assez proche:

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

Je pense que ce qui va sélectionner, le premier et le td de tous les rangs? Je pense que ce n'est pas ce que veulent les OP. – NawaMan

+0

Non, toujours la même chose. Sélectionne uniquement les premières cellules trouvées, je veux appliquer les classes à TOUTES les cellules d'une colonne. Merci. – 3zzy

+0

@Nimbuz - S'il vous plaît voir mon edit. – karim79

0

Essayez le casser un peu, vous la traversée faites est incorrect

// 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"); 

Alors nous avons juste besoin pour vous assurer que la marque up est tout bon

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

Et puis jQuery devrait passer par chacun avec les résultats suivants

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

Le code de Karmi est plus compact, mais merci quand même :-) – 3zzy

+0

Hmm, je pensais que vous essayiez d'appliquer le code aux balises TR, au moins cela ressemblait à ça de votre extrait jQuery;) – jakeisonline

1

Si th éléments d'importance ... Je ne sais comment vous voulez traiter colspans soit.

<!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> 
Questions connexes