Javascript 具有行跨度重新排序项目拖放问题的HTML表

我的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>

我只想重新排序子类，如水果芒果、橘子或向日葵，而不是表中的主要类。 这把小提琴正在演奏。如何解决这个问题。谢谢。

试试这个：

我已经更新了你的小提琴。根据您的代码，您的html是错误的。你必须检查你的新html。 您必须使用嵌套表来实现它，而不是使用行跨度

<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>

SL
分组
描述
1.
果
芒果
橙色
菠萝
2.
花
玫瑰
向日葵

查看更新的小提琴。如果这是你需要的。

---

希望这能有所帮助

你能不能先创建一个表格单元格，然后在该单元格中创建一个可排序列表？这是个好主意。但当我添加一个新的子组，如

typeofmango

时，它将更难显示，并且rowspan值实际上来自数据库。这就是为什么我想保留这个。谢谢。谢谢，但我只想重新排序嵌套表，而不是主表。这是我的要求，谢谢。最后一个问题是，如何使用

td

获取嵌套表

index

，以便我可以通过ajax请求在数据库中更新它。我尝试了

$（“#sort tbody tr td>table tbody”）.sortable（“serialize”，{key:'td}）不起作用。请检查此链接。这可能对你有帮助。
<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>