jquery - get all rows except the first and last

Question

i want to dynamically add a class to all rows of a table except the first and last row. how would i do this without assigning a css class to the rows to identify them. I a

Answer 1

Strange the suggestions posted did not work, they should all work! BUT...

If it did not work, do it this way.... slightly slower but MUST WORK!! TRY:

$('table#tbl tr').addClass('highlight');
$('table#tbl tr:first-child').removeClass('highlight');
$('table#tbl tr:last-child').removeClass('highlight');

Answer 2

You can also use the .slice() method to remove the first/last elements from the set:

$('table tr').slice(1, -1);

The .slice() method essentially creates a new jQuery object with a subset of the elements specified in the initial set. In this case, it will exclude the elements with an index of 1 and -1, which are the first/last elements respectively.

Example:

$('table tr').slice(1, -1).css('background-color', '#f00');

table { width: 100%; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr><td>1</td></tr><tr><td>2</td></tr>
  <tr><td>3</td></tr><tr><td>4</td></tr>
  <tr><td>5</td></tr><tr><td>6</td></tr>
</table>

---

Of course, you can also negate :first-child/:last-child using :not():

$('table tr:not(:first-child):not(:last-child)').css('background-color', '#f00');

table { width: 100%; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr><td>1</td></tr><tr><td>2</td></tr>
  <tr><td>3</td></tr><tr><td>4</td></tr>
  <tr><td>5</td></tr><tr><td>6</td></tr>
</table>

---

You can also combine :nth-child(n+2) and :nth-last-child(n+2):

$('table tr:nth-child(n+2):nth-last-child(n+2)').css('background-color', '#f00');

table { width: 100%; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr><td>1</td></tr><tr><td>2</td></tr>
  <tr><td>3</td></tr><tr><td>4</td></tr>
  <tr><td>5</td></tr><tr><td>6</td></tr>
</table>

Answer 3

Try this:

.not(':first').not(':last')

Answer 4

why not just this?

$('table tr:not(:first-child):not(:last-child)');

works as pure CSS selector as well.

Answer 5

Drop the gt(), as I'd assume it's a tiny bit slower than :first.

Use not() in conjunction with :first and :last:

$('table#tbl > tbody > tr').not(':first').not(':last').addClass('highlight');

Most browsers automatically add an tbody element in the table markup if that's missing, that is why the immediate children selector was failing – there were no <tr> elements as an immediate children to the <table> tag.

I am not 100% sure this is the way all browsers do it, so it would be safer to just add the <tbody> manually. Otherwise you need a little sniffing and cannot do it as an one liner:

if($('table#tbl > tbody').size() > 0) {
    $('table#tbl > tbody > tr').not(':first').not(':last').addClass('highlight');
} else {
    $('table#tbl > tr').not(':first').not(':last').addClass('highlight');
}

Hope this solves your problem!

Answer 6

You can combine the .not() methods into one by separating the selectors with commas:

$('#id tr').not(':first, :last');
$('#id tr:not(:first, :last');

Note that the second one is not valid in pure CSS, only as a jQuery selector. For pure CSS you'd have to use @Sumit's answer.