Question

我有一个看起来像这样的html表

<table id="eventTable">
  <thead>
    <tr><th>#</th><th>Options</th></tr>
  </thead>
  <tbody>
    <tr id="6">
      <td>6</td><td><a href="www.site.com" class="moveUp">Up</a><a href="www.site.com" class="moveDown">Down</a></td>
    </tr>
    <tr id="5">
      <td>5</td><td><a href="www.site.com" class="moveUp">Up</a><a href="www.site.com" class="moveDown">Down</a></td>
    </tr>
    <tr id="2">
      <td>2</td><td><a href="www.site.com" class="moveUp">Up</a><a href="www.site.com" class="moveDown">Down</a></td>
    </tr>
    <tr id="4">
      <td>4</td><td><a href="www.site.com" class="moveUp">Up</a><a href="www.site.com" class="moveDown">Down</a></td>
    </tr>
  <
</table>

<p><a href="www.site.nl/process.php?type=order" id="saveOrder">Save order</a>

我使用以下函数来更改行顺序


  $(".moveUp").click(function(e){
    var event = e || window.event;
    event.preventDefault();
    var row = $(this).closest('tr');
    row.prev().insertAfter(row);
  });

$(".moveDown").click(function(e){
    var event = e || window.event;
    event.preventDefault();
    var row = $(this).closest('tr');
    row.insertAfter(row.next());
  });

当订单完成后，我必须保存（当然）。我有一个textlink通过PHP传递值来更新数据库中的值。我的问题是如何在表中找到元素的新位置。到目前为止我有这个功能


  $("#saveOrder").click(function(e){
    var event = e || window.event;
    event.preventDefault();
    var t = "";
    $("#eventTable tr").each(function(){
      t += this.attr("id") || "";
      alert($(this).rowIndex);
    });
    window.location.href = $(this).attr("href")+"&sort="+t;
  });

这只会从表行中传递al id attribute值，但我不知何故也需要传递新的tablerow-order。任何人都知道如何实现这一目标？ this.rowIndex似乎不起作用

修改

我试过Jasper的解决方案，但它并不完全（但是很好的一半;））我正在寻找什么。请参阅上面的示例，id attributes表示数据库记录的唯一ID。当我更改表行的顺序时，我需要将数据库ID与新位置匹配。

所以在开始时，我的输出编码将是

61|52|23|44
id 6 == row 1
id 5 == row 2
id 2 == row 3
id 4 == row 4

假设我切换了id 5和2的位置，我希望我的输出是这样的：


61|22|53|44
id 6 == row 1
id 2 == row 2
id 5 == row 3
id 4 == row 4

希望这说清楚：）

感谢您的帮助！

Answer 1

$('#saveOrder').click(function (e) {
    e.preventDefault();
    var $TRs = $('#eventTable').find('tr[id]'),//this only selects TR elements that have an ID attribute
        out  = [];
    for (var i = 0, len = $TRs.length; i < len; i++) {
        out.push($TRs.eq(i).attr('id'));
    }
    //now the ids are in order from top to bottom and stored in an array (`out`)
    window.location.href = $(this).attr("href") + "&sort=" + out.join('|');
});

以下是演示：http://jsfiddle.net/mAUtk/1

另外在附注中，您的ID无效;他们不应该以一个数字开头。以下是关于如何在HTML中创建有效ID属性的精彩帖子：What are valid values for the id attribute in HTML?

您只需将id属性更改为有效HTML5代码的data-id即可。

Answer 2

<table>的childNodes应该为您提供所需内容的数组。或者.children（），但是你喜欢遍历DOM。

Answer 3

试试这个：

var t = "";
var tarr = []; // temp array
$("#eventTable tr").each(function(){ 
    t = this.attr("id") || ""; 
    tarr.push(t);
}); 
t = tarr.join("_");
window.location.href = $(this).attr("href")+"&sort="+t;

现在，您的新位置将包含一个查询字符串变量sort，该变量等于所有表行ID，按顺序用下划线分隔。

订单更改后获取行索引

3 个答案: