javascript - JS 中的行交换

Question

我正在构建一个函数，该函数一次将表中的行向上移动一行。向下按钮尚未制作，因为我首先尝试建立向上按钮。尽管该函数确实移动了一行，但它经常会跳过一些行，向上移动两个位置，通常直接移动到表的顶部。添加的最后一行似乎总是按预期移动(一次向上移动 1 行)。 Up 函数位于我的 Fiddle 的最底部。这与我如何创建每一行有关吗？ JS 字符串？

另外，考虑到向上和向下函数只会以一种方式移动一行，最好只切换正在交换的两行的innerHTML(尽管我认为我的上一行和下一行错误仍然存​​在) ？

function Up() {
    var row = $(this).parent().parent(); //tr
    if ($(this).hasClass('up'))
         row.next().after(row);
    else
         row.prev().before(row);
}

我也相当确定，它永远不会识别出它 hasClass('up') (无论是 'up' 还是 btnUp')。

Answer 1

实际上，有一个更好的解决方案，只需要绑定(bind)一次，并且可以减少代码大小。顺便说一句，jQuery 从 1.7 版本开始提供了 .bind() 的首选替代方案。这是 .on() 。您应该委托(delegate)事件，而不是将多个事件绑定(bind)到表中的所有按钮，从而将整个表的监听器数量减少到只有 4 个，并且无需重新绑定(bind)/取消绑定(bind)!

$("#tblData").on("click", ".btnEdit", Edit);     
$("#tblData").on("click", ".btnDelete", Delete); 
$("#tblData").on("click", ".btnUp", Up); 
$("#tblData").on("click", ".btnSave", Save);    

上面的代码告诉 Javascript:“在 #tblData 内，仅当目标(=单击的按钮)具有类 <function> 时才执行 btnSomething 。”在你的 fiddle 中，我也通过了event (e)作为参数并替换 $(this)与 $(e.target) 。这是可选的，但很好的做法。

我还将您的 up 函数简化为:

function Up(e) {
    var row = $(e.target).parent().parent(); //tr
    if (row.prev().length)
        row.prev().before(row);
}

结果:更少的代码、更好的性能、更干净。 http://jsfiddle.net/46nozdqa/10/