0

我有一个“添加”按钮，每次单击时都会插入该行。每行都有一个编辑和删除按钮。

//html
<tr class="insertedRow">
    <td><input type="hidden" class="name" /></td>
    <td><input type="hidden" class="age" /></td>
    <td>
        <input type="button" class="edit" class="btn" value="Edit" />
        <input type="button" class="delete" value="Delete" />
    </td>
</tr>

我有这个 jQuery 来删除您要删除的相应行。但是当您单击“编辑”时，我无法弄清楚如何选择相应行的“姓名”和“年龄”我现在拥有的代码始终针对第一个插入的行。有任何想法吗？谢谢。

我想我需要以某种方式选择“编辑”按钮的 parent.parent，然后定位“名称”和“年龄”ID。

//jQuery
$(".delete").live('click',function() {
    $(this).parent().parent().remove();
});

$(".edit").live('click',function() {
    $('.name').clone().attr('type','text').insertAfter('.name').prev().remove();
    $('.age').clone().attr('type','text').insertAfter('.age').prev().remove();
});
4

5 回答 5

0

首先将 id 转换为类：

<td><input type="hidden" class="name" /></td>
<td><input type="hidden" class="age" /></td>

然后 ：

$("#edit").live('click',function() { $name =
   var name =  $(this).closest(".insertedRow").find(".name");
   var age =  $(this).closest(".insertedRow").find(".age");

   name.clone().attr('type','text').insertAfter(name).prev().remove();
   age.clone().attr('type','text').insertAfter(age).prev().remove();
});
于 2012-10-18T16:17:23.163 回答
0

id除非您更改其 id，否则您无法克隆具有属性的元素。

请阅读本文以了解为什么它每次都为您提供第一个元素。

于 2012-10-18T16:18:20.380 回答
0

为了避免重复id，你可以做这样的事情

var lastid = $('[id^="clonedInput"]').length + 1;
$(".clonedInput").last().clone().attr('id', 'clonedInput' + lastid).appendTo("body")

或使用.class

于 2012-10-18T16:21:41.770 回答
0

一方面，您的单击事件处理程序的目标是一个名为“#name”的 ID……但是您对行的克隆可确保您将拥有多个具有相同 ID 的元素。

此外，jQuery 的文档清楚地表明禁止更改类型 attr：http: //api.jquery.com/attr/

注意：jQuery 禁止更改 or 元素的 type 属性，并且会在所有浏览器中抛出错误。这是因为不能在 Internet Explorer 中更改类型属性。

此外，正如其他人指出的那样，您可能不应该使用 .live()，因为它已被弃用（意味着它在不确定的将来会消失）......您应该考虑使用 .on()，因为这是支持的方向。

于 2012-10-18T16:25:58.600 回答
0

这是值：

$(this).parent().find(".name").text();
$(this).parent().find(".age").text();

和你的编辑功能：

$(".edit").live('click',function() {
    $('.name').clone().attr('type','text').insertAfter('.name').value($(this).parent().find(".name").text()).prev().remove();
    $('.age').clone().attr('type','text').insertAfter('.age').value($(this).parent().find(".age").text()).prev().remove();
});
于 2012-10-18T16:24:18.973 回答