代码之家 › 专栏 › 技术社区 › Peter

jquery标识行中的元素

jquery

Peter · 技术社区 · 15 年前

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

2 回复 | 直到 15 年前

sharat87 15 年前

我觉得你应该上课 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 . 他们是少用,但可怕的方法。

Bennor McCarthy 15 年前

从你的问题来看,你到底想做什么有点不清楚,但这会将所有的值加载到一个对象中:

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实例。您可能还需要检查处理的每个分区的ID(使用 switch 块)并在每种情况下创建不同类型的输入(取决于您的需要)。