Question

使用jQuery添加/删除表格的这个简单脚本适用于1.3.2版本。但是，在同一页面上我也使用需要jQuery的脚本＆gt; 1.6。此脚本不再适用于此，因为如果我第二次单击添加，它将删除一行而不是添加它。

可在此处找到一个工作示例：http://jsbin.com/arete3/edit#source

$(function(){
        $("input[type='button'].AddRow").toggle(
            function(){
                $(this).closest('tr').clone(true).prependTo($(this).closest('table'));
                $(this).attr("value", "Delete row");
            },
            function(){ 
               $(this).closest('tr').remove();          
        });
    });

要了解我的意思，请将jQuery版本更改为高于1.6的任何内容。

有人有建议吗？

Answer 1

这是一个可以满足您需求的脚本我不知道你为什么使用.toggle，因为有一次它的添加和下一次删除。这是没有意义的。

Check out this JSBin

我认为这就是你要找的东西。

$(function(){
// Add row on click (on click of the add button)
$("input[type='button'].AddRow").click(function(){
    // Add the row
    $(this).closest('tr').clone(true).prependTo($(this).closest('table'));
});

// Delete row on click (on click of the delete button)
$("input[type='button'].DelRow").click(function(){
    // Delete the row
    $(this).closest('tr').remove();
});
}); // End DOM

Answer 2

你可以像这样改变剧本

$("input[type='button'].AddRow").click(

function() {
    var index = $(this).closest('tr').index();
    if (index > 0) {
        $(this).closest('tr').remove();
    } else {
        $(this).closest('tr').clone(true).prependTo($(this).closest('table'));
        $(this).val("Delete row");
    }

});

在这里摆弄http://jsfiddle.net/nicolapeluchetti/fGam7/

Answer 3

您不能以这种方式设置元素的“值”。使用“.val（）”：

$(this).val("Delete row");

从jQuery 1.6开始，严格地说“.attr（）”方法（在1.6.1之后，几乎严格地说）处理实际的属性，而不是属性类似<input>元素上的“值”。对于设置属性，可以使用“.prop（）”，或者在“value”属性的情况下使用“.val（）”。

1.6.1中的更改是为了在几个布尔属性/属性（如“已选中”和“已选择”）的情况下简化严格性。根据我的个人经验，即使使用“prop（）”也更安全，特别是在处理单选按钮时。

（“属性”和“属性”之间的区别似乎很微妙，但它确实很重要，尤其是在IE中。“属性”是存储在DOM节点中的内部地图中通过“setAttribute（）”访问的内容“getAttribute（）”方法.DOM节点的“属性”就像任何其他JavaScript对象属性一样。因此，要获取/设置<input> DOM节点的值，您需要引用“值”属性，你用“.prop（）”或“.val（）”用jQuery来操作它。其他重要的属性是“src”，“href”，“className”，“id”，“name”，“type” ，“tagName”等。）

另外，您可能需要考虑将表格行预先添加到最接近的<tbody>元素而不是<table>。

脚本不能使用新版本的jQuery

3 个答案: