Javascript 用jQuery遍历表
我有一个名为“data order”的TR元素上有一个HTML属性的表,它只包含一个整数,指示对表进行排序的顺序(降序)。现在代码只检查TR单击前的行-我试图让它扫描其在表中位置前的所有行,一旦找到大于(不大于或等于)的数字,然后调用swaprouw函数 下面是用于向上移动行的javascriptJavascript 用jQuery遍历表,javascript,jquery,Javascript,Jquery,我有一个名为“data order”的TR元素上有一个HTML属性的表,它只包含一个整数,指示对表进行排序的顺序(降序)。现在代码只检查TR单击前的行-我试图让它扫描其在表中位置前的所有行,一旦找到大于(不大于或等于)的数字,然后调用swaprouw函数 下面是用于向上移动行的javascript function adjustRank(id, e) { var url = "/ajax/moveup/" + aid; var row = $(e).closest("tr").
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>
林赛·沃恩
2Al霍福德酒店
德雷克·杰特
您可以使用递归来解决该问题。请看代码
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调用成功函数中。请参见AJAX请求的目的是什么?你没有对结果做任何事。如果它们已经有序,那么为什么会调用swapRows
呢?把它想象成一个投票系统。这部分工作正常,我担心用jquery遍历表。发送帖子后,Ajax不会加载整个结果集。在ajax调用中只发生一个小的操作——然后javascript在客户端对表进行重新排序,以避免命中数据库甚至服务器端的缓存。我们正在尽可能地优化它。让我们从最基本的开始:不要使用表格进行布局。将HTML保存在.HTML
文件中,CSS保存在.CSS
文件中,JS保存在.JS
files.zzzzBov中-这是一件很容易发生的事情。谢谢你的意见。就表格而言——依我看,它们并不总是不好的(我不是唯一一个——雅虎的工程师会同意)。这是一个比任何其他元素都更适合表格的列表。我可能会补充说,如果页面布局发生变化,表格将不会改变——就像一个小部件。一个已经包装在DIV中的小部件。为了简洁起见,我在这篇文章中删去了一些代码等。谢谢,这是我需要的技巧-用一些mod将其添加到我的代码中,效果非常好。没有成千上万的条目,因此它非常快速和高效。而且,它不像使用集合(有时)那样显示数据刷新。而且,它直接回答了我的问题!