I want to give ALL (including <th>) cells of FIRST and LAST columns some specific classes, I tried this:
$("table tr:first-child td:first-child").addClass("first-col-cell");
$("table tr:last-child td:last-child").addClass("last-col-cell");
..but it doesn't seem to work.
Would appreciate any help.
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>
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"></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>
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>
