使用jQuery UI Sortable与HTML表格

Question

我想从数据库中输出一些数据到HTML表格中，并希望用户能够重新排列表格行。为了实现这一点，我使用了jQuery UI sortable：

<script>
    $(function() {
        $( "#sortable" ).sortable();
        $( "#sortable" ).disableSelection();
    });
    </script>
<?php 
 while($row = mysql_fetch_assoc($co_authors)) {
                    echo "<tr id='sortable'><td>{$row['author_email']}</td>
                         <td>{$row['coauthor_level']}</td>";
                         <td><button class='remove' id='remove' name='remove' email="<?php echo $row['author_email'] ?>"
                            paper="<?php echo $row['paper_id'] ?>">Remove</button></td>
                         </tr>";
                }
?>

问题在于当我拖动一个表格的 tr 时，只有 td 被拖动了。最重要的是，只有第一行可以被拖动：效果并没有应用到其他行。我该如何解决这个问题？

- Samer El Gendy

---

文档内的 id 属性必须是唯一的。您的代码创建了多个具有相同 id (sortable) 的元素。请改用 class。 - Frédéric Hamidi

说句题外话，如果使用这种方法对其行进行排序，则带有“contenteditable”属性的“td”似乎无法编辑。只是提供一下信息。 - jg2703

Answer 1

你可以在 <tbody> 上调用 sortable，而不是对每一行单独调用。

<table>
    <tbody>
        <tr> 
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td> 
        </tr>
        <tr>
            <td>5</td>
            <td>6</td>
        </tr>  
    </tbody>    
</table>​

<script>
    $('tbody').sortable();
</script> 

$(function() {
  $( "tbody" ).sortable();
});

 
table {
    border-spacing: collapse;
    border-spacing: 0;
}
td {
    width: 50px;
    height: 25px;
    border: 1px solid black;
}

 

<link href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-1.11.1.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

<table>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr> 
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
        </tr>
        <tr>
            <td>9</td> 
            <td>10</td>
        </tr>  
    </tbody>    
</table>

- TJ VanToll

---

现在这个工作正常了，整个tr都可以拖动，但是现在出现了一个新问题，就是tr的位置没有改变，我猜是因为我从数据库中获取数据，它们应该按照那个顺序来，所以我能否也在数据库中改变位置？ - Samer El Gendy

是的，如果您想保留已排序的位置，则必须在某个地方保存该信息。 - TJ VanToll

谢谢！我真的很害怕得重新设计，而我只有一个小时使它生效，非常感谢！ - NaturalBornCamper

代表user236766发布帖子：你可能想把最后一个<tbody>改为</tbody> ;) - NathanOliver

不知道为什么我决定在表格上调用sortable而不是tbody元素...谢谢！ - ksudu94

谢谢！阅读后，这绝对是合乎逻辑的！我们希望对tbody进行排序，而不是tr！ - Jona