I need to select the nth row of a HTML table knowing only the id of a selected row. This is my situation: JSFiddle Demo

<table class="mytable1">
    <tr><td id="12">1.0</td></tr>
    <tr><td id="20">1.1</td></tr>
    <tr><td id="120">1.2</td></tr>
    <tr><td id="260">1.3</td></tr>
    <tr><td id="2">1.4</td></tr>
    <tr><td id="100">1.5</td></tr>
    <tr><td id="23">1.6</td></tr>
</table>

For example i want to fadeOut the 2th <tr> from the row i know its id, in this case fadout animation has to be launched on <tr><td id="260">1.3</td></tr>

To be more clear, this is the final desired result:

$("#"+"260").closest("tr").fadeOut();

Thanks

I need to select the nth row of a HTML table knowing only the id of a selected row. This is my situation: JSFiddle Demo

<table class="mytable1">
    <tr><td id="12">1.0</td></tr>
    <tr><td id="20">1.1</td></tr>
    <tr><td id="120">1.2</td></tr>
    <tr><td id="260">1.3</td></tr>
    <tr><td id="2">1.4</td></tr>
    <tr><td id="100">1.5</td></tr>
    <tr><td id="23">1.6</td></tr>
</table>

For example i want to fadeOut the 2th <tr> from the row i know its id, in this case fadout animation has to be launched on <tr><td id="260">1.3</td></tr>

To be more clear, this is the final desired result:

$("#"+"260").closest("tr").fadeOut();

Thanks

• javascript
• jquery
• html

• What is the +"" at the end of the selector meant to be doing? – Lix Commented Dec 8, 2014 at 12:18
• The JSFiddle appears to be working. Are you wanting to dynamically assign the ID number? – Nostalg.io Commented Dec 8, 2014 at 12:20
• I don't want to fadeout the selected row, but the nth row after the selected one! – Peppegiuseppe Commented Dec 8, 2014 at 12:20
• How do you decide what n is? – Omri Aharon Commented Dec 8, 2014 at 12:21
• Please look at api.jquery./nth-child-selector – ilan berci Commented Dec 8, 2014 at 12:21

5 Answers 5

If you need to get nth row after the known one, you can do something like this using index and :eq selector:

var n = 2;
var index = $("#20").closest("tr").index() + n;
$('.mytable1 tr:eq(' + index + ')').fadeOut();

Demo: http://jsfiddle/896kxjn1/14/

If you know the index of the element inside the table :nth-child(index) can be a solution,

$("table tr:nth-child(2)").fadeOut();

And if you know the id only, not the index then get the index of that element,

// added 1 as .index() is indexed with 0 but in :nth-child(n) n is indexed 1
var elementIndex = $("#20").parent().index() + 1;
$("table tr:nth-child(" + elementIndex + ")").fadeOut();

jsFiddle

Resources : :nth-child(index), .index()

i want to fadeOut the 2th from the row

Then you can just do this with :eq(index):

 $('.mytable1 tr:eq(1)').fadeOut();

As :eq() is zero, 0 based so it's index starts from 0, so the second item is at index 1.

You can also use the nextAll and then by index:

$("#"+"20"+"").closest("tr").nextAll('tr').eq(n-1).fadeOut();

This way, you don't have to start at the table itself if you don't want to.

Fiddle

Apparently there are million better ways to do this using features of jQuery I wasn't even aware existed.

But, I'll post my answer for the sake of showing a fair, procedural way to acplish this. It may help someone understand the thought processes behind solving this problem.

// Create an array of tr elements from your table
row_list = $('table.mytable1 tr');

// Get the actual DOM element selected by jQuery with [0]
selected_row = $("#"+"20").closest("tr")[0];

// Use some function to set "nth"
nth_add = 2;

for (var i = 0; i < row_list.length; i++) {
    // Find the index of the current element, and add nth
    if (row_list[i] == selected_row) {
        select_new_index = i + nth_add;
        break;
    }
}

// Perform your manipulation on the index + nth element.
$(row_list[select_new_index]).fadeOut();

And here is the updated JSFiddle.