Get Row data using jquery

Question

Hi ...., I implement some thing like this

- person grid -
name        address     action
a           ax          edit
b           bx          edit

- form edit -
id         :
name       :
address    :
<submit edit>

action edit is a link, supposed the anchor tag is: <a href="http://localhost/person/edit/1"&gt; while I click the edit link. the personf information will displayed in id, name, address text filed. supposed, the input filed name. txt_id, txt_name, txt_address.

my implementation is:

$("a").click(function(event) {
    $.parrent = $(this).parent().parent();
    $.id = ... //get id
    $.name = ...//get name
    $.address = ...//get address

    ${"txt_id"}.val($.id);
    ${"txt_address"}.val($.address);
    ${"txt_name"}.val($.name);
    return false;
});

I dont know how to implement get id, get name, get address after I get the parrent. Is there any suggestion ? or Is there any other sollution ?

Edit

And while click submit edit, I will display the new name and address to the current edited row.

Answer 1

Use jquery td:nth-child(n) to get the value from each td cell. See a similar question How to get a table cell value using jquery?

Answer 2

This should do what you are looking for:

$("a").click(function(e) {
    var $td      = $(this).closest('tr').children('td'),
        $id      = parseInt($(this).attr('href').replace('http://localhost/person/edit/',''), 10),
        $name    = $td.eq(0).text(),
        $address = $td.eq(1).text();

    $("#txt_id").val($id);
    $("#txt_address").val($address);
    $("#txt_name").val($name);

    e.preventDefault();
});