使用jQuery遍历表格

Question

使用jQuery遍历表格

4

我有一个表格，TR元素上有一个HTML属性，名为"data-order"，它简单地保存了一个整数，表示按照哪个顺序排序表格（降序）。目前代码只检查点击的TR前面的一行 - 我试图做的是扫描表中其位置之前的所有行，并且一旦找到一个大于指定数字（而不是大于或等于），就调用swaprow函数......

这是用于向上移动行的JavaScript代码。

function adjustRank(id, e) {
    var url = "/ajax/moveup/" +  aid;
    var row = $(e).closest("tr").get(0);
    var prevRow = $(row).prev().get(0);
    var moveUp = false;
    var prevRowOrder = parseInt($(prevRow).attr("data-order"));
    var rowOrder = parseInt($(row).attr("data-order"));

    $.ajax({
        type: "POST",  
        url: url,
        data: {aid: aid},
        dataType: "json",
        success: function () 
        { 
            if(rowOrder + 1 > prevRowOrder)  // think this is where I need to traverse the table
                swapRows(row, prevRow);
        },
        failure: function () { alert("Error processing request."); }
    });
}

以下是表格中的一些示例：

<table id="listings" style="min-height:150px; width:100%;">
    <tr id="1" data-order="11"><td>1</td><td align="left"><span onclick="adjustRank('ace93485-cea5-4243-8294-9f3d009aba3d', this)" style="cursor:pointer;">Lindsey Vonn</span></td><td></td></tr>
    <tr id="2" data-order="6"><td>2</td><td align="left"><span onclick="adjustRank('9f83aed6-b99a-4674-a8b7-9f3d009aba38', this)" style="cursor:pointer;">Al Horford</span></td><td></td></tr>
    <tr id="3" data-order="5"><td>3</td><td align="left"><span onclick="adjustRank('d48a52bd-17e9-4631-9a2e-9f3d009aba39', this)" style="cursor:pointer;">Derek Jeter</span></td><td></td></tr>
</table>

- bbqchickenrobot

AJAX请求的目的是什么？您没有使用结果进行任何操作。如果它们已经有序，那么为什么会调用 swapRows？ - mellamokb

1

zzzzBov - 这已经在发生了。感谢您的输入。就表格而言，在我看来它们并不总是不好的选择（而且我不是唯一一个这么认为的人——雅虎工程师也会同意）。以下是适合使用表格而不是其他元素的事物列表。 - bbqchickenrobot

我想补充一下，如果页面布局发生变化，表格不会改变 - 它就像一个小部件。这个小部件已经包装在一个DIV中。为了简洁起见，我在这篇文章中删除了一些代码等。 - bbqchickenrobot

你说得对，表格确实有用武之地，而且你的情况可能正好符合要求。但我认为@zzzzBov也在提到你代码中的内联CSS（这里并不是很相关）和JavaScript。如果你已经将数据存储在“data”属性中，为什么不同时存储ID，并使用jQuery委托点击事件呢？ - polarblau

谢谢polarblau - 嗯...喜欢这个建议...让我来改一下。另外，关于内联CSS（jscript在.js文件中）- 我知道这是演示代码。但是，如果您的建议有效，请将其作为答案留下，我会给您信用！那么刷新问题呢？列表永远不会超过500吗？仍然很昂贵吗？ - bbqchickenrobot

显示剩余3条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- avrelian · Accepted Answer

你可以使用递归来解决这个问题。请看代码。

window.adjustRank = function(id, el) {
    var orderDiff = 1; 
    var row = $(el).closest("tr");
    var order = parseInt(row.attr("data-order")) + orderDiff;
    row.attr("data-order", order);

    var prevRow = row.prev();
    if(prevRow.get(0)){
        moveUp(order, row, prevRow);
    }
}

window.moveUp = function(order, row, prevRow){
    if(order > parseInt(prevRow.attr("data-order"))){
        var prevPrevRow = prevRow.prev();
        if(prevPrevRow.get(0)){
            moveUp(order, row, prevPrevRow);
        } else {
            prevRow.before(row);
        }
    } else {
        prevRow.after(row);
    }
}

如果您通过AJAX获取orderDiff，那么请将该代码放入您的AJAX调用成功函数中。请参见此演示。