Sélection des colonnes de tableaux (jQuery)

je veux donner à toutes les cellules (y compris <th> ) de la première et de la dernière colonne quelques classes spécifiques, j'ai essayé ceci: 

$("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.

apprécierait toute aide.

1
demandé sur Brian Tompsett - 汤莱恩 2009-09-27 21:21:53

3 réponses

EDIT: votre sélecteur é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>
1
répondu karim79 2009-09-27 17:34:54

Si th éléments de la matière... Je ne sais pas comment vous voulez traiter colspans non plus. 

<!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>
1
répondu meder omuraliev 2009-09-27 17:44:26

essayez de le décomposer un peu, la traversée que vous faites est incorrecte 

// 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 de s'assurer que la marge 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 ensuite jQuery devrait passer par chacun d'eux 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
répondu jakeisonline 2009-09-27 17:39:24