JQuery populate form fields with data from a selected table row

Question

I have a simple table with an edit button at the end of each row as below:

<table class='document_table'>
<tr>
    <td>Item1</td>
    <td>Item2</td>
    <td>Item3</td>
    <td><a href='javascript:void(0);' class='edit_doc'>Edit</a></td>
</tr>
<tr>
    <td colspan='4'>Item4</td>
</tr>
<tr>
    <td colspan='4'>Item5</td>
</tr>
<tr>
    <td>Item1</td>
    <td>Item2</td>
    <td>Item3</td>
    <td><a href='javascript:void(0);' class='edit_doc'>Edit</a></td>
</tr>
<tr>
    <td colspan='4'>Item4</td>
</tr>
<tr>
    <td colspan='4'>Item5</td>
</tr>
</table>

What I need to do is when the edit button is clicked is populate a form with the data from the three rows. Note that the number of rows is dynamic.

Form html is as follows:

 <label>Input 1<label>
 <input type='text' class='input1' />
 <label>Input 2<label>
 <input type='text' class='input2' />
 <label>Input 3<label>
 <input type='text' class='input3' />...etc

So far my jQuery is as follows but is not working....

var row1=$(this).closest('tr').find('td').eq(0).val();
$('.input1').val(row1);

I also have to be alble to get the values from the next two rows :(

Nelson Benítez León · Accepted Answer · 2012-09-22 11:08:07Z

4

You should use .html() instead of .val() , like this:

var row1=$(this).closest('tr').find('td').eq(0).html();

To obtain your other rows, you could do:

var td = $(this).closest('tr').find('td');
var row1 = td.eq(0).html();
var row2 = td.eq(1).html();
var row3 = td.eq(2).html();

edited Sep 22, 2012 at 11:08

answered Sep 22, 2012 at 10:53

Nelson Benítez León

51.1k8 gold badges70 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Sideshow Over a year ago

Can't believe I've made such an elemtary mistake - the other problem though is obtaining the next two rows. Thank you :)

Sideshow Over a year ago

var td = $(this).closest('tr').next('tr').find('td'); seems to get the next table row

Nelson Benítez León Over a year ago

Yes, and what do you mean? you only wanted the values from the tr where the click happened, not from other tr's..

Sideshow Over a year ago

Sorry - should have made that clearer but you have helped with the overall problem. Thanks.

jazkat Over a year ago

Just to clarify, values in row1, row2, row3 actually contain values of each CELL of one table row. Perhaps it would be better to name them cell1, cell 2, cell3. However, thanks for the answer!

Collectives™ on Stack Overflow

JQuery populate form fields with data from a selected table row

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related