CODEWITHSUNDEEP
javascriptjqueryhtmlcss
LCJ
LCJ

Reputation: 22661

jQuery: Get First Column Value on Fourth Row (only) of HTML Table

I have a table named resultGridTable. I have a jQuery function to be executed on each row of the table. In the function, "this" means a row.

  1. For the fourth row, I need to alert the first column value (of fourth row). I have the following code; but it does not work. How can we make it working?

  2. For the fifth row, I need to alert the number of columns in the row. How can we do it?

  3. In the sixth row's second column, I have two buttons (input type="submit"). I need to alert the second button's text/value. (The second button has a class named "secondButton") How can we do it?

Following is the code::

$('#resultGridTable tr').each(function (i) 
{
    //"this" means row
    //Other operations in the row. Common for all rows

    if(i==3)
    {
        //Specific Operation for fourth row
        var columnValue = $(this 'td:nth-child(0)').val();
        alert(columnValue);
    }
});

READINGS:

  1. jQuery Code: Starting from Parent to Child; not from Child to Parent

  2. How to get value of first column in current row in html table using jQuery

  3. How to get the first row's last column of an Html table using jQuery

Upvotes: 3

Views: 33982

Answers (4)

cweitat
cweitat

Reputation: 1257

Adapted from Accepted Answer. This is the code if you are using jquery instead of document.getElementById The difference is that you need to insert the array of [0].

 var t = $('resultGridTable');

// jQuery to get the content of row 4, column 1
var val1 = $(t[0].rows[3].cells[0]).text();

Upvotes: 0

Alnitak
Alnitak

Reputation: 339975

Just to be different, you can mix up DOM and jQuery to good effect here since you have fixed offsets into the table:

var t = document.getElementById('resultGridTable');

// jQuery to get the content of row 4, column 1
var val1 = $(t.rows[3].cells[0]).text();  

// no jQuery here to get that row length!
var val2 = t.rows[4].cells.length;       

// DOM access for the cell, and jQuery to find by class and get the text 
var val3 = $('.secondButton', t.rows[5].cells[1]).text();

These should all be substantially faster than using selectors.

Upvotes: 10

Linus Thiel
Linus Thiel

Reputation: 39261

Look into jQuery eq:

alert($('#resultGridTable tr:eq(3) > td:eq(0)').text());
alert($('#resultGridTable tr:eq(4) > td').length);
alert($('#resultGridTable tr:eq(5) > td:eq(1) > .secondButton').text());

Upvotes: 7

Jeff Watkins
Jeff Watkins

Reputation: 6357

If you have special values for rows/columns, consider adding a class to it, then you can use selectors rather than "magic" numbers which could change.

Upvotes: 2

Related Questions