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标签之一：＆lt; a onclick =“return moveUp（this）;” href =“javascript：return 0;”＆gt; up＆lt; / a＆gt;

function moveUp(aEl) {
    var me = $($(aEl).parents('tr').get(0));
    var prev = me.prev('tr');
    if (prev.attr('class') == '_movable') me.insertBefore(prev);
    return false;
}
function moveDown(aEl) {
    var me = $($(aEl).parents('tr').get(0));
    var next = me.next('tr');
    if (next.attr('class') == '_movable') me.insertAfter(next);
    return false;
}

Answer 6

您应该能够使用一些简单的jQuery选择器，捕获箭头上的click事件，并使用选择器获取下一个/上一个元素并交换它们。

然后使用selector来获取每一行的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);
        }
    });

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

7 个答案: