使用jQuery UIsorting与HTML表格

我想在HTML表格中输出数据库中的一些数据，我希望用户能够对表格行重新sorting。 为了达到这个目的，我使用jQuery UIsorting，因此：

<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被拖动。 另外，最重要的是，只有第一行是可拖动的：效果不适用于其他行。 我该如何解决这个问题？

Answer 1

调用sortable的<tbody>而不是单独的行。

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