CODEWITHSUNDEEP
javascriptjqueryhtml
Peppegiuseppe
Peppegiuseppe

Reputation: 183

How to select the nth HTML row in jQuery

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

Upvotes: 2

Views: 4038

Answers (5)

Nostalg.io
Nostalg.io

Reputation: 3752

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

Upvotes: 1

Md Ashaduzzaman
Md Ashaduzzaman

Reputation: 4038

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

Upvotes: 4

Omri Aharon
Omri Aharon

Reputation: 17064

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

Upvotes: 1

Jai
Jai

Reputation: 74738

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.

Upvotes: 1

dfsq
dfsq

Reputation: 193261

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.net/896kxjn1/14/

Upvotes: 4

Related Questions