jQuery：将表格行移动到第一个位置然后再移回
我需要将表格行从一个位置移动到表格中的第一个位置，然后再次单击旧位置。
我在表格中有一个复选框列表。 这些来自代码背后，已经排序。 如果我单击一个复选框，我想将此条目移动到列表的开头。 如果用户取消选中此框或单击另一个框，则应将其移至旧位置。
为了更好地理解：
[ ] 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/
我会存储每个tr的位置，并在需要时将其移回。
我根据ShadowScripter的评论更新了代码
新更新 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)); } }); });
在看到所有其他的例子，以及它们如何不能按预期工作之后，我决定制作一个有效的例子。
这是示例 | 有效果 | 码
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);
最好的办法就是只需要在某处编写方框的“正常”顺序并再次对所有方框进行排序，而不是试图将一个方框放在旧位置。
你可以做类似的事情（编辑清理代码并解决一些问题）
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/