get the html of the second td of selected tr of datatable

Question

i have a datatable...

Now i have this code, which chages the class or a tr to "selected" when clicked..

$(document).ready(function()
{
    $("#domains_list tbody").on( "click", "tr", function () 
        {
            $(this).toggleClass("selected");
        } );

});

Now my datatable comes like this...

Now as you can see there are two pages showing different selected rows

now i write this code

$('#butto').click(function()
{
$("#domains_list").find("tr.selected").each(function() 
    {
        $(this).find("td:eq(1)").each(function()
            {
                alert($(this).html());
            });
    });
});

this above code was intended to show all the htm l in the second <td> of the selected <tr>

But the problem is, it alerts only the <td> html of <tr> in the opened page ...

ie if page 1 is open then it alerts only <td> html of page 1,

if page 2 is open then it alerts only <td> html of page 2,

How can i make it to alert all the html of the irrespective of the page opened?

Answer 1

For "second td", Use nth-of-type :

$(this).find("td:nth-of-type(2)").each(function() {
    alert($(this).html());
});

You might be able to use it like this ...

$("#domains_list").find("tr.selected td:nth-of-type(2)").each(function() {
    alert($(this).html());
});

The :nth-of-type(n) selector matches every element that is the nth child, of a particular type, of its parent.

Tip: Look at the :nth-child() selector to select the element that is the nth child, regardless of type, of its parent.

Answer 2

Using your example page, I was able to log all the the names inside the first TD of each selected rows using the following code:

$("tr.selected").each(function(){
console.log($(this).find("td:first").html());
});

if you need a TD other than the first one, you can use the :nth-child(index) selector instead of :first

check the following image, and do let me know if this is not what you want.