我想在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>"; } ?>
解决方法
可在< 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>
$( "tbody" ).sortable();
table { border-spacing: collapse; border-spacing: 0; } td { width: 50px; height: 25px; border: 1px solid black; }
<link href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" rel="stylesheet"> <script src="http://code.jquery.com/jquery-1.11.1.js"></script> <script src="http://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>