脚本不适用于新版本的 jQuery答案

【问题标题】：Script not working with new versions of jQuery脚本不适用于新版本的 jQuery
【发布时间】：2011-12-05 13:49:12
【问题描述】：

这个使用 jQuery 添加/删除表行的简单脚本在 1.3.2 版本中运行良好。但是，在同一页面上，我还使用需要 jQuery > 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 的版本

有人有什么建议吗？

【问题讨论】：

嗯，jQuery 更高版本的行为是正确的。你到底想发生什么？
该代码看起来不像 .toggle 的正确签名。 api.jquery.com/toggle
Baszz：没有特别的错误，但是脚本变得无用，因为它不再做它应该做的事情：jsbin.com/arete3/edit#source 1.3.2：当您单击添加按钮时，它会添加一行，您可以根据需要多次执行此操作。您还可以删除您添加的行，但第一行除外。奇迹般有效。 >1.3.2（最好是1.6.x）：可以点击一次添加行按钮，目前效果不错。但是当您再次单击它时，它会删除一行而不是添加它。你也可以这样删除第一行。
@AutoSponge 它是 other 切换。 api.jquery.com/toggle-event

标签： javascript jquery dynamic html-table add

【解决方案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

【讨论】：

您正在以这种方式更改标记，您应该在进行这种重构时尝试限制更改。
这也有效，谢谢。我在这里唯一缺少的是您可以删除第一行。但现在已经解决了。感谢您的帮助。

【解决方案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/

【讨论】：

是否可以在 HTML 标签的 id 中添加某种计数器？我正在使用适用于一个字段的 jQuery datepicker 插件（jQuery UI），但使用此脚本，每个字段都获得相同的 id。
@mat 当然可以，例如，您可以使用索引作为计数器来添加到您的 id。不过，我在您的示例中没有看到任何 id
这几乎就像一个脚本请求。我擅长 PHP，但不擅长 JS 和 jQuery。我正在使用您的代码（如上），日期选择器的代码是： jQuery('.AddRow').removeClass('hasDatepicker').datepicker({ dateFormat: 'dd-mm-yy' });结果是所有字段都获得相同的日期。我找到了：stackoverflow.com/questions/34790/duplicating-jquery-datepicker/… 和 stackoverflow.com/questions/2365150/…，但无法正常工作..您有什么建议吗？
@mat 你应该发布你的完整代码，也许打开一个新问题，以便更容易提供帮助！ :)
> 感谢您的回复。我开了一个新话题：stackoverflow.com/questions/8399631/…

【解决方案3】：

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

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

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

在 1.6.1 中所做的更改是为了在“checked”和“selected”等几个布尔属性/属性的情况下放宽严格性。以我个人的经验，即使是那些也坚持使用“prop()”会更安全，尤其是在处理单选按钮时。

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

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

【讨论】：