Question

I am a lil new to JQ. I have a table and each row has a unique id like so <tr id="123">.

I have a edit button in one of the fields on that row, and I want to turn that row into a form.

How can I grab all the values of each field in that row?

Here is what the table looks like now.

<tr id="e2c420d928d4bf8ce0ff2ec19b371514">
   <td><div id="item_name">asdf (asdf)</div></td>

   <td><div id="edit">Edit</div></td>

   <td><div id="item_description">asdf</div></td>

   <td><div id="item_price">1234</div></td>

   <td><div id="item_qty">1</div></td>

   <td><div id="item_total">1234</div></td>
</tr>

<tr id="b2x4123928d4bf8ce0ff2ec19b372138">
   <td><div id="item_name">asdf (asdf)</div></td>

   <td><div id="edit">Edit</div></td>

   <td><div id="item_description">asdf</div></td>

   <td><div id="item_price">1234</div></td>

   <td><div id="item_qty">1</div></td>

   <td><div id="item_total">1234</div></td>
</tr>

Answer 1

I think you should be using classes and data-id attributes, but it is up to you.

<table id="myTable">
    <tr data-id="e2c420d928d4bf8ce0ff2ec19b371514">

        <td><div class="item_name">asdf (asdf)</div></td>

        <td><div class="edit">Edit</div></td>

        <td><div class="item_description">asdf</div></td>

        <td><div class="item_price">1234</div></td>

        <td><div class="item_qty">1</div></td>

        <td><div class="item_total">1234</div></td>
    </tr>

    <tr data-id="b2x4123928d4bf8ce0ff2ec19b372138">
        <td><div class="item_name">asdf (asdf)</div></td>

        <td><div class="edit">Edit</div></td>

        <td><div class="item_description">asdf</div></td>

        <td><div class="item_price">1234</div></td>

        <td><div class="item_qty">1</div></td>

        <td><div class="item_total">1234</div></td>
    </tr>
</table>

What you need is (assuming you are using jquery 1.4.2+)

$('#myTable').delegate('.edit', 'click', function () {
    var trElem = $(this).closest('tr');
    name = trElem.find('div.item_name').text();
    // etc...
});

Read up more on .delegate and .closest. They are less used but awesome methods.