jquery identifying elements in a row

Question

Hi Guys,

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

It's a little unclear from your question exactly what you're trying to do, but this will load all the values into an object:

var values = {};
$("#e2c420d928d4bf8ce0ff2ec19b371514 div").each(function() {
    var div = $(this);
    values[div.attr("id")] = div.html();
}

and you'll be able to reference the values like this:

var itemName = values["item_name"];

In light of the changes to the question this is what you need to do:

$("div#edit").click(function() {
    $("div", this).each(function() {
        var div = $(this);
        if(div.attr("id") !== "edit") {
            var input = $('<input type="text" />').attr("name", div.attr("id")).val(div.html());
            div.replaceWith(input);
        }        
    }
}

You'll probably want to change the ids of the divs to classes (and replace div.attr("id") with div.attr("class") and $("div#edit") with $("div.edit"), because you should only have one instance of an id per page. You'll also probably want to check the id of each div you process (using a switch block) and create a different type of input in each case (depending on your needs).

Answer 2

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.