Question

我需要将表格行从一个位置移动到表格中的第一个位置，然后再次点击旧位置。

我在表格中有一个复选框列表。这些来自代码背后，已经排序。如果我单击一个复选框，我想将此条目移动到列表的开头。如果用户取消选中此框或单击另一个框，则应将其移至旧位置。

为了更好地理解：

 [ ] 1
 [ ] 3
 [ ] A
 [ ] B
 [ ] C

点击例如[ ] C：

 [X] C
 [ ] 1
 [ ] 3
 [ ] A
 [ ] B

点击例如[ ] 3 C已经有了旧位置，3已经移到了最前面。

 [X] 3
 [ ] 1
 [ ] A
 [ ] B
 [ ] C

我设法排到了最前面。 但是如何再次将行移到旧位置？

示例 ，其中包含用于移至顶部的工作代码：

http://jsfiddle.net/6F5mQ/

Answer 1

我会存储每个tr的位置，并在需要时将其移回。

我根据ShadowScripter的评论

更新了代码

http://jsfiddle.net/gguNM/1/

新更新 http://jsfiddle.net/gguNM/2/

$('table tr').each(function () {
  var $this  = $(this).data({position: $(this).index()}),
      $table = $this.closest('table'),
      $input = $this.find('input');

  $input.bind('click', function (e) {
    var $first = $table.find('tr:first'),
        position;

    if ($(this).is(':checked')) {
      position = $first.data('position');
      $table.find('tr input').not($(this)).removeAttr('checked');

      if (position != 0) $first.insertAfter($table.find('tr').eq(position));
      $this.prependTo($table);
    } else if ($this.data('position') != 0) {
      position = $this.data('position');
      $this.insertAfter($table.find('tr').eq(position));                
    }
  });
});

Answer 2

在看到所有其他的例子，以及它们如何按预期完成后，我决定制作一个有效的例子。

Here's the example | With effects |代码

var $tbody =  $("table tbody");

var last_position = -1;
$("input").click(function(){
    var $row = $(this).closest("tr"),
        $first_row = $tbody.find("tr:first-child"),
        $trs = $tbody.find("tr");

    if($row.index() == $first_row.index()){
        if( last_position > 0 ){
            $trs.eq(last_position).after($row);
            last_position = -1;
        }
        return;
    }else if(last_position > 0){
       $trs.eq(last_position).after($first_row);
    }

    $tbody.find("input").not(this).attr("checked", false);

    last_position = $row.index();

    $tbody.prepend($row);
});

您描述了两种类型的操作

用户点击不第一行的输入，第一行向后移动，此行移至顶部
用户点击第一行输入，哪一行已被移动，第一行向后移动

当用户点击输入时，我们需要知道它在移动之前的位置，所以我们将存储最后一个位置。我们给它一个-1的值，因为我们需要一个默认值，这意味着所有行都是它们原来的位置。

var last_position = -1;

然后我们定义我们将要使用的变量

var $row = $(this).closest("tr"),               //input row clicked
    $first_row = $tbody.find("tr:first-child"), //first row
    $trs = $tbody.find("tr");                   //all the table rows, so we can switch 'em around

然后我们检查它是否是被点击的第一行，如果是，则重置last_position。我们还确保最后一个位置尚未重置或位于第0位，因为在这些情况下它不应移动。

if($row.index() == $first_row.index()){
    if( last_position > 0 ){
        $trs.eq(last_position).after($row);
        last_position = -1;
    }
    return;
}else if(last_position > 0){
   $trs.eq(last_position).after($first_row);
}

最后，我们取消选中所有其他框，将最后一个位置更新到此行，然后将其放在顶部。

$tbody.find("input").not(this).attr("checked", false);

last_position = $row.index();

$tbody.prepend($row);

Answer 3

要做的最好的事情就是在某个地方写下方框的“正常”顺序并再次对所有方框进行排序，而不是试图在旧地方放置一个方框。

Answer 4

您可以执行类似操作（编辑以清理代码并修复某些问题）

var lastIndex;
$("input").click(function() {
    var $tbody = $(this).closest("tbody");
    var $tr = $(this).closest("tr");
    if($tr.index() === 0) return;
    $tbody.find("tr:first input:checkbox").prop('checked', false);
    if (lastIndex === undefined) {
        lastIndex = $tr.index();
        $tr.insertBefore($tbody.children("tr:first"));
    } else {
        $tbody.find("tr:first").insertAfter($("tr:eq(" + lastIndex + ")", $tbody))
        lastIndex = $tr.index();
        $tr.insertBefore($tbody.children("tr:first"));
    }
});

在这里摆弄http://jsfiddle.net/6F5mQ/2/

jQuery：将表格行移动到第一个位置然后再返回

4 个答案: