Question

我是JQ的新手。我有一个表，每行都有一个唯一的ID，如<tr id="123">。

我在该行的某个字段中有一个编辑按钮，我想将该行转换为表格。

如何获取该行中每个字段的所有值？

这是现在的表格。

<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

从你的问题确切地说你正在尝试做什么有点不清楚，但这会将所有值加载到一个对象中：

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

你将能够像这样引用这些值：

var itemName = values["item_name"];

根据问题的变化，您需要做的是：

$("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);
        }        
    }
}

您可能希望将div的ID更改为类（并将div.attr("id")替换为div.attr("class")，将$("div#edit")替换为$("div.edit")，因为您应该只有{每页一个id的实例。你也可能想要检查你处理的每个div的id（使用switch块）并在每种情况下创建一个不同类型的输入（根据你的需要）。 / p>

Answer 2

我认为您应该使用类和data-id属性，但这取决于您。

<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>

您需要的是（假设您使用的是jquery 1.4.2 +）

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

在.delegate和.closest上阅读更多内容。它们使用较少但是方法很棒。

jquery连续识别元素

2 个答案: