Afternoon,

I wish to pass the row number of a table to a function to reference that specific row in that specific table, for example say I have this:

<table id="foo">
  <tr><td>some stuff...</td><tr>
  <tr><td>stuff</td><tr>
  <tr><td>more stuff</td><tr>
  <tr><td>some stuff</td><tr>
  <tr><td>some stuff</td><tr>
</table>

and I have looped through the table rows and obtained the index, so in this example say I wanted to do something with the third row (which would have an index of 2, the one which has the contents "more stuff"). And I passed this through a function, like this

manipulateRow(2)

and this is my whole function

function manipulateRow(rowIndex){

/* do something */

}

How do you refer the rowIndex parameter to the table within the function? For example:

$('#foo').child("tr")[rowIndex].html('<td>i now contain even more stuff!</td>'); // I know this is wrong, how do I make it right?

Sorry if I'm being a bit thick or not explaining myself.

Afternoon,

I wish to pass the row number of a table to a function to reference that specific row in that specific table, for example say I have this:

<table id="foo">
  <tr><td>some stuff...</td><tr>
  <tr><td>stuff</td><tr>
  <tr><td>more stuff</td><tr>
  <tr><td>some stuff</td><tr>
  <tr><td>some stuff</td><tr>
</table>

and I have looped through the table rows and obtained the index, so in this example say I wanted to do something with the third row (which would have an index of 2, the one which has the contents "more stuff"). And I passed this through a function, like this

manipulateRow(2)

and this is my whole function

function manipulateRow(rowIndex){

/* do something */

}

How do you refer the rowIndex parameter to the table within the function? For example:

$('#foo').child("tr")[rowIndex].html('<td>i now contain even more stuff!</td>'); // I know this is wrong, how do I make it right?

Sorry if I'm being a bit thick or not explaining myself.

• javascript
• jquery
• html

Share Improve this question Follow asked Jul 27, 2011 at 14:33 Mike SavMike Sav 15.3k3131 gold badges102102 silver badges150150 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

Easy.

$("#foo tr:eq("+rowIndex+")").html("<td>i now contain even more stuff!</td>");

Learn more about jQuery selectors here: http://api.jquery./category/selectors/

that could work actually only like this:

$($('#foo tr')[rowIndex]).html('<td>i now contain even more stuff!</td>');

but best to use :eq

Try this

$('#foo > tr').eq(rowIndex).html('<td>i now contain even more stuff!</td>');

function manipulateRow(rowIndex) {
    var $row = $('#foo tr:nth-child(' + rowIndex + ')');
    ...
}

See nth-child-selector.

here you go:

<table>
    <tbody>
        <tr><td>Foo</td></tr>
    </tbody>
    <tfoot>
        <tr><td>footer information</td></tr>
    </tfoot>
</table>

$("#myTable > tbody").append("<tr><td>row content</td></tr>");

heres another example inline editing:

function editRow(row) {
    $('td',row).each(function() {
         $(this).html('<input type="text" value="' + $(this).html() + '" />');
    });
}