javascript - 找出您刚刚移动的表格的哪一行

Question

我想制作一个包含可拖动和可放置行的表格，我可以使用 jquery ui 实现，但是我想更新每行第一个单元格中的数字，以始终与自上而下的数字顺序相对应。

例如，表格可能像这样开始:

<table id="myTableId">
    <tbody>
        <tr class="draggable droppable"><td>1</td><td>abc</td></tr>
        <tr class="draggable droppable"><td>2</td><td>def</td></tr>
        <tr class="draggable droppable"><td>3</td><td>ghi</td></tr>
    </tbody>
</table>

在用户拖动行之后它可能会像这样结束，例如:

<table id="myTableId">
    <tbody>
        <tr class="draggable droppable"><td>2</td><td>def</td></tr>
        <tr class="draggable droppable"><td>3</td><td>ghi</td></tr>
        <tr class="draggable droppable"><td>1</td><td>abc</td></tr>
    </tbody>
</table>

然后我想运行一个函数，将第一个单元格中的数字从上到下排序回数字顺序，以便 html 看起来像这样:

<table id="myTableId">
    <tbody>
        <tr class="draggable droppable"><td>1</td><td>def</td></tr>
        <tr class="draggable droppable"><td>2</td><td>ghi</td></tr>
        <tr class="draggable droppable"><td>3</td><td>abc</td></tr>
    </tbody>
</table>

行已移动，但顶部的行在第一个单元格中的值仍然为 1，第二行的值仍然为 2，依此类推...

我发现了一个 JavaScript 函数，它可以计算表格中的行数，我如何编写一个 JavaScript 函数来将数字 1、2 和 3 重新排序回表格中第一个单元格中的顺序？

<script>
    var rows = document.getElementById('myTableId').getElementsByTagName('tbody')[0].getElementsByTagName('tr').length;
    alert(rows);
</script>

作为引用，这是我用来使行可拖放的 jquery:

$(function() {

    $(".draggable").draggable( {
        helper: function() { return "<div class='shadow'></div>"; },
        start: moveShadow,
        revert: true
     });

    function moveShadow(event, ui) {
        var helper = ui.helper;
        var element = $(event.target);
        helper.width(element.width());
        helper.height(element.height());
    }

    $(".droppable").droppable({
        hoverClass: 'ui-state-active',
        drop: function(event, ui) {
            var target = $(event.target);
            var draggable = ui.draggable;
            draggable.insertBefore(target);
          }
    });
});

Answer 1

不需要计算任何东西。只需运行一个循环并递增:

http://jsfiddle.net/isherwood/tLpjho9f/

var myCount = 1;

$('#myTableId tr.droppable').each(function() {
    $(this).find('td').eq(0).text(myCount);
    myCount ++;
});

您需要将其应用到下拉回调中。