Question

我想创建一个带有dragabble和droppable行的表，我可以使用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 ++;
});

您希望将其用于drop回调。

找出你刚搬过的那一排桌子

1 个答案: