jQuery将tr追加到div异常：克隆无响应/追加行数不符

• 使用$(someTableRow).clone().appendTo(theDiv)方式时，点击按钮无任何反应；
• 使用$(theDiv).append(someTableRow)方式时，原本共有5个元素，却只成功追加3行、1行、1行（分三次点击的结果）。

原因分析 #

1. 点击无反应的原因 #

代码中按钮选择器写为$("#button ")（id后多了一个空格），导致jQuery无法匹配到id为button的按钮元素，点击事件没有正确绑定，所以点击后无任何动作。

2. 元素追加不完整的原因 #

document.getElementsByClassName()返回的是动态HTMLCollection集合，当你直接将元素从原table移动到div时，集合的长度会实时更新：

• 初始集合有5个元素，循环i=0时移走第一个元素，集合长度变为4；
• i=1时，此时集合的索引1对应原集合的第三个元素，移走后集合长度变为3；
• i=2时，集合索引2对应原集合的第四个元素，移走后集合长度变为2，循环条件i < b.length不再满足，循环终止，因此第一次点击只移走3个元素；
• 第二次点击时集合剩余2个元素，同理循环只会移走1个；第三次点击移走最后1个，最终出现3、1、1的结果。

解决方法 #

针对点击无反应的问题 #

修正按钮选择器，去掉id后的空格：

$("#button").click(function () {
    // ... 逻辑代码
})

针对元素追加不完整的问题 #

方案1：克隆元素到div（保留原table中的元素）

将动态集合转为静态数组，避免循环中集合长度变化影响：

$("#button").click(function () {
    // 用jQuery获取静态集合，或把HTMLCollection转成数组
    var rows = $(".tRows");
    // 或 var rows = Array.from(document.getElementsByClassName('tRows'));
    rows.each(function() {
        $(this).clone().appendTo("#discount");
    });
})

方案2：移动元素到div（原table中移除元素）

同样先将动态集合转为静态数组，再循环操作：

$("#button").click(function () {
    var rows = Array.from(document.getElementsByClassName('tRows'));
    for (var i = 0; i < rows.length; i++) {
        $("#discount").append(rows[i]);
    }
})

修正后的完整脚本示例 #

$(function () {
    $("#button").click(function () {
        // 克隆方案
        var rows = $(".tRows");
        rows.each(function() {
            $(this).clone().appendTo("#discount");
        });

        // 若使用移动方案，替换为下面的代码：
        // var rows = Array.from(document.getElementsByClassName('tRows'));
        // for (var i = 0; i < rows.length; i++) {
        //     $("#discount").append(rows[i]);
        // }
    })
})

内容的提问来源于stack exchange，提问作者LambertGolden