开发者

:last for table

开发者 https://www.devze.com 2023-04-06 01:21 出处:网络
<table> <tr><td>First Row</td><td>2 Row</td><td>1 last</td></tr>
  <table>

    <tr><td>First Row</td><td>2 Row</td><td>1 last</td></tr>
    <tr><td>Middle Row</td><td>2 Row</td><td>2 last</td></tr>
    <tr><td>Last Row</td><td>2 R开发者_开发技巧ow</td><td>3 last</td></tr>

  </table>


$('tr').each(function(index) {
    $("td:last").css({backgroundColor: 'yellow', fontWeight: 'bolder'});
  });

LIVE: http://jsfiddle.net/DxVG5/1/

why this working only for 3 last, but on 1 last and 2 last no? how can i fix it?


Your example will get the last td in each tr because using :last literally gets the last td in the table. Try this instead:

$('tr td:last-child').css({
   backgroundColor: 'yellow', 
   fontWeight: 'bolder'
});


Specify the context in which that TD is the last one. In your case which TR. Passing the second argument to the jQuery constructor should do it.

$('tr').each(function(index) {
    // ------------|
    //             | here
    $("td:last", this).css({backgroundColor: 'yellow', fontWeight: 'bolder'});
});


Try this instead:

$('tr').each(function(index) {
    $("td:last-child").css({backgroundColor: 'yellow', fontWeight: 'bolder'});
  });

http://jsfiddle.net/andresilich/DxVG5/11/


You need to add the context of the td, you're already in a for loop so the 'this' variable can be used. In this context 'this' is equal to the tr you're currently iterating on.

$('tr').each(function(index) {
    $("td:last",this).css({backgroundColor: 'yellow', fontWeight: 'bolder'});
});


You need to make sure you are only looking through TDs inside the current TR, by using $(this).find() or by adding this as the second argument in your selector.

$('tr').each(function(index) {
  $("td:last",this).css({backgroundColor: 'yellow', fontWeight: 'bolder'});
});


I've updated your fiddle: http://jsfiddle.net/nslr/DxVG5/4/

You were checking for the global $('td:last'), not the one for the specific row, which is done like this (inside the .each())

$(this).find('td:last')....


Assign last-child of the tr

$('tr').each(function(index) {
    $("td:last-child").css({backgroundColor: 'yellow', fontWeight: 'bolder'});
  });

Check this http://jsfiddle.net/ucCQH/5/


try this

$('tr').each(function(index) {
   $("td:last", this).css({backgroundColor: 'yellow', fontWeight: 'bolder'});
});
0

精彩评论

暂无评论...
验证码 换一张
取 消