Jquery UI sortable in the table 只应用在第2和第3个td

Question

我有一个 table 看起来像这样。

<table>
<tbody>
    <tr>
        <td>1</td>
        <td>cell 1-1</td>
        <td>cell 1-2</td>
    </tr>
    <tr>
        <td>2</td>
        <td>cell 2-1</td>
        <td>cell 2-2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>cell 3-1</td>
        <td>cell 3-2</td>
    </tr>
    <tr>
        <td>4</td>
        <td>cell 4-1</td>
        <td>cell 4-2</td>
    </tr>
    <tr>
        <td>5</td>
        <td>cell 5-1</td>
        <td>cell 5-2</td>
    </tr>  
<tbody>    
</table>

现在我想用 jQuery ui 对 table 行进行排序，其中只有第 2 行和第 3 行 td 将一起排序，没有effect 或 sort 将应用于索引。

<script>
   $( function() {
   $( "tbody" ).sortable({
       connectWith: "tr"
       }).disableSelection();
   } );
</script>

Answer 1

检查工作 fiddle : http://jsfiddle.net/NayanaDas/9wtn4z1c/ . 这里只有第 2 和第 3 列将一起排序，借助 2 tables 并将 sortable 设置为第二个 table，请尝试以下代码：

HTML:

<table>
    <tr>
        <td>
            <table>
                <thead>
                    <tr>
                        <th>Index</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                    </tr>
                    <tr>
                        <td>2</td>
                    </tr>
                </tbody>
            </table>
        </td>
        <td>
            <table>
                <thead>
                    <tr>
                        <th>column1</th>
                        <th>column2</th>
                    </tr>
                </thead>
                <tbody id="sortTable">
                    <tr>
                        <td>cell 1-1</td>
                        <td>cell 1-2</td>
                    </tr>
                    <tr>
                        <td>cell 2-1</td>
                        <td>cell 2-2</td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
</table>

JS:

$( function() {
   $('#sortTable').sortable();
});

希望对您有所帮助。

Jquery UI sortable in the table 只应用在第2和第3个td

Jquery UI sortable in the table applied only in the 2nd and 3rd td

jquery

html-table

jquery-ui-sortable