Using jQuery UI sortable with HTML tables

Question

I want to output some data from the database in a HTML table, and I want the user to be able to reorder table rows. To achieve this, I used jQuery UI sortable, thus:

<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>";                 } ?> 

The problem is that when I drag a table tr, only td are dragged. Also, and most importantly, only the first row is dragable: the effect is not applied to other rows. How can I solve this?

Answer 1

You can call sortable on a <tbody> instead of on the individual rows.

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