javascript – 带有rowspan重新排序项拖放问题的HTML表

2023年11月18日 250次阅读

我的
HTML代码是

<table border='1px' id='sort'>
    <thead>
        <tr>
            <th>SL</th>
            <th>Sub Group</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan='3'>1</td>
            <td rowspan='3'>Fruit</td>
            <td>Mango</td>
        </tr>
        <tr>
            <td>Orange</td>
        </tr>
        <tr>
            <td>pineapple</td>
        </tr>
        <tr>
            <td rowspan='2'>2</td>
            <td rowspan='2'>Flower</td>
            <td>Rose</td>
        </tr>
        <tr>
            <td>sunflower</td>
        </tr>
    </tbody>
</table>

和js

var fixHelperModified = function(e, tr) {
    var $originals = tr.children();
    var $helper = tr.clone();
    $helper.children().each(function(index) {
        $(this).width($originals.eq(index).width())
    });
    return $helper;
},
    updateIndex = function(e, ui) {
        $('td.index', ui.item.parent()).each(function (i) {
            $(this).html(i + 1);
        });
    };

$("#sort tbody").sortable({
    helper: fixHelperModified,
    stop: updateIndex
}).disableSelection();

我想重新排序像水果芒果,橙子或向日葵的子组,玫瑰不是表中的主要组.
工作小提琴是http://jsfiddle.net/p6c814o6/.如何解决这个问题.谢谢.

最佳答案 试试这个：

我已经更新了您的小提琴JsFiddle.根据您的代码,您的HTML是错误的.你必须检查你的新HTML.
您必须使用嵌套表来实现它,而不是使用rowspans.

<table border='1px' id='sort'>
    <thead>
        <tr>
            <th>SL</th>
            <th>Sub Group</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td >1</td>
            <td >Fruit</td>
            <td><table>
                <tr>
            <td>Mango</td>
        </tr>
                <tr>
            <td>Orange</td>
        </tr>
        <tr>
            <td>pineapple</td>
        </tr></td>
        </tr>
        </table>
        <tr>
            <td >2</td>
            <td >Flower</td>
            <td><table>
                <tr>
                    <td>
                Rose
                    </td>
                </tr>
            <tr>
            <td>sunflower</td>
        </tr>
                </table>
            </td>

    </tbody>
</table>

看看更新的小提琴.如果这是你需要的.
希望这有助于JsFiddleUpdated

点赞