使用向上和向下箭头图像重新排序表格行？

Question

我想在 Javascript（可能是 jQuery）中添加用于在表格行上上下移动的小图像箭头，并将重新排序的表格（仅顺序）保存在 cookie 中以供进一步使用。一个例子是 - Joomla，在文章区域的管理区域内（但这是用 php 完成的）。谢谢。

Answer 1

也许可以再重构一点，但我把节省留给你：

function swap(a, b, direction){
  var html = a.wrapInner('<tr></tr>').html()
  a.replaceWith(b.wrapInner('<tr></tr>').html())
  b.replaceWith(html)
}
function getParent(cell){ return $(cell).parent('tr') }
$(document).ready(function(){
  $('.upArrow').live('click', function(){
    var parent = getParent(this)
    var prev = parent.prev('tr')
    if(prev.length == 1){ swap(prev, parent); }
  })
  $('.downArrow').live('click', function(){
    var parent = getParent(this)
    var next = parent.next('tr')
    if(next.length == 1){ swap(next, parent) }
  })
})

假设这张表：

<table>
  <tbody>
    <tr><td>1</td><td class="upArrow">up</td><td class="downArrow">down</td></tr>
    <tr><td>2</td><td class="upArrow">up</td><td class="downArrow">down</td></tr>
    <tr><td>3</td><td class="upArrow">up</td><td class="downArrow">down</td></tr>
  </tbody>
</table>

Answer 2

对于 jQuery 部分，您可以考虑修改 this plugin 以使用单击图标而不是拖放。

Answer 3

function UpperBttn_Pressed(this) {

    var RowIndex = X.parentNode.parentNode.rowIndex;
    var ParentTable = X.parentNode.parentNode.parentElement;
    if (RowIndex != 0 && RowIndex != 1) {
        ParentTable.moveRow(RowIndex, RowIndex - 1);
    }

}
function DownBttn_Pressed(this) {

    var RowIndex = X.parentNode.parentNode.rowIndex;
    var ParentTable = X.parentNode.parentNode.parentElement;
    var NthRow = GetElement("dataTable").rows.length;
    if (RowIndex!=NthRow-1) {
        ParentTable.moveRow(RowIndex, RowIndex + 1);
    }

}

Answer 4

这是一个老问题，但我发现了它，其中一篇文章让我走上了正确的道路，所以对于其他在这里谷歌的人来说

使用 jQuery

function Func(trigger, blnUp){
var trigRow = $("#" + trigger.id).parent().parent();
var prevRow = trigrRow.prev();
var nextRow = trigRow.next();
var trigRowHTML = "";
if(blnUp){
    trigRowHTML = prevRow.html();
    prevRow.html(trig.html());
}else{
    trigRowHTML = nextRow.html();
    nextRow.html(trig.html());
    }
}

表格需要看起来像

<table>
  <tbody>
    <tr><td>1</td><td><a onclick="Func(this, true)">UP</a></td><td><a onclick="Func(this, false)">UP</a></td></tr>
    <tr><td>2</td><td><a onclick="Func(this, true)">UP</a></td><td><a onclick="Func(this, false)">UP</a></td></tr>
    <tr><td>3</td><td><a onclick="Func(this, true)">UP</a></td><td><a onclick="Func(this, false)">UP</a></td></tr>
  </tbody>
</table>

如果你有一个像其他答案一样的表格，你应该能够只删除一个 .parent() 调用，它也会这样做。

Answer 5

insertBefore() 和 insertAfter() 工作得很好。在下面的示例中，我在一个表中有几个 A 标记。单击一个向下移动该行，另一个向上移动。如果您将允许移动的行（也许您不想将行移动到页眉行上方或页脚行下方）设置为 _movable 类，那么它们只会在页眉和页脚行之间移动。

这是一个 A 标签：向上

函数上移（aEl）{ var me = $($(aEl).parents('tr').get(0)); var prev = me.prev('tr'); if (prev.attr('class') == '_movable') me.insertBefore(prev); 返回假； } 函数 moveDown(aEl) { var me = $($(aEl).parents('tr').get(0)); var next = me.next('tr'); if (next.attr('class') == '_movable') me.insertAfter(next); 返回假； }

Answer 6

您应该可以使用一些简单的 jQuery 选择器来实现，捕获箭头上的点击事件，并使用选择器获取下一个/上一个元素并交换它们。

然后使用选择器获取每行的 id，但是您正在存储它 - 可以在 tr 上识别每行设置 id 以使选择变得容易。示例选择器是 here 并将其存储到 cookie 中，同样是 here 的简单 JS。

Answer 7

$('.upArrow').livequery('click', function () {
        var row = $(this).closest('tr');
        var prev = row.prev();
        if (prev.length == 1) {
                row.detach();
                prev.before(row);
        }
    });
    $('.downArrow').livequery('click', function () {
        var row = $(this).closest('tr');
        var next = row.next('tr');
        if (next.length == 1) {
            row.detach();
            next.after(row);
        }
    });