ansaurus

Question

Answer 1

+1 A:

EDIT: Your selector was pretty close:

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

karim79 2009-09-27 17:25:36

I think what will select, the first and las td of all row? I think that is not what the OP want.

NawaMan 2009-09-27 17:26:57

Nope, still the same. Selects only the first cells found, I want to apply the classes to ALL the cells in a column. Thanks.

Nimbuz 2009-09-27 17:27:46

@Nimbuz - Please see my edit.

karim79 2009-09-27 17:36:29

Perfect, thanks! :-)

Nimbuz 2009-09-27 17:38:42

Answer 2

A:

Try breaking it down a little, the traversing you're doing is 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");

Then we just need to make sure the mark up is all good

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

And then jQuery should go through each one with the following results

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

jakeisonline 2009-09-27 17:32:03

Karmi's code is more compact, but thanks anyway :-)

Nimbuz 2009-09-27 17:39:16

Hmm, I thought you were trying to apply the code to the TR tags as well, at least it looked that way from your jQuery snippet ;)

jakeisonline 2009-09-27 17:40:57

Answer 3

+1 A:

If th elements matter... not sure how you'd want to treat colspans either.

<!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"&gt;&lt;/script&gt;
<script type="text/javascript">
    $(function() {
      $("table tr :first-child").text('first').css('background', 'yellow');
      $("table tr :last-child").text('last').css('background', 'brown');
    });
</script>

meder 2009-09-27 17:32:48

ansaurus

tags:

views:

answers:

Selecting table columns (jQuery)

related questions