Question

我用HTML创建了一个表，由tbody标签中的表行组成。我使用了mredkj.com的javascript代码片段来添加行并删除它们。行被排序，它们的排名位于每个TR（行）的第一个TD（单元格）中。

现在我希望添加能够手动“使用”桌面的功能。

问题是：

我的javascript / jquery知识是非常有限
画布的行列不要更新（当你删除一行时， rowranks由更新 'reorderRows函数，但是从我的jQuery中调用这个函数似乎没有解决问题）
点击向上或向下按钮后，用户在textarea中的输入就会被删除。

例如：用户添加一个TR，它被添加到当前表格列表的底部，填写textarea并且要求他填充的行应该排在第一位，所以她点击向上箭头a几次，直到它排在最前面。行的等级现在为＃1，输入仍在textarea中。

我的问题是：

有谁知道我怎么做行时更新他们的排名用户移动行？
如何维护用户的输入？

非常感谢任何帮助，如果您有任何其他建议，请分享。

此处的代码：http://jsbin.com/eyefu5/edit - 出于某种原因，上下移动在js bin中不起作用，但是当我在浏览器中运行它时会这样做。

Answer 1

我更新了您的代码，以执行我认为您尝试执行的操作：http://jsbin.com/eyefu5/9/

我的主要更改是以下交换逻辑：

function swap(a, b){
  b.before(a);
  reorderRows(document.getElementById(TABLE_NAME), 0);
}

function getParent(cell){ return $(cell).parent('tr'); }

$('#diagnosetabel').on('click', '.upArrow', function(){
    var parent = getParent(this);
    var prev = parent.prev('tr');

    if(prev.length == 1){ swap(parent, prev); }
});

$('#diagnosetabel').on('click', '.downArrow', function(){
    var parent = getParent(this);
    var next = parent.next('tr');

    if(next.length == 1){ swap(next, parent); }
});

最大的区别在于我将交换代码切换为使用jQuery的before方法，该方法应该为您完成所有事情。我还添加了对您已使用的reorderRows方法的调用。目前它在开始时开始并在交换后重新排序所有数字，但你可以根据需要缩小它，因为你知道只有两行被修改。

希望有所帮助！

JS / JQUERY：上下移动编号的表行而不会丢失用户输入

1 个答案: