Quiero generar algunos datos de la base de datos en una tabla HTML y quiero que el usuario pueda reordenar las filas de la tabla. Para lograr esto, utilicé jQuery UI ordenable, así:
<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>";
}
?>
El problema es que cuando arrastro una tabla tr
, solo td
se arrastran. Además, y lo más importante, solo se puede arrastrar la primera fila: el efecto no se aplica a otras filas. ¿Como puedo resolver esto?
jquery
jquery-ui
html-table
jquery-ui-sortable
Samer El Gendy
fuente
fuente
id
los atributos deben ser únicos dentro de un documento. Su código está creando varios elementos con el mismoid
(sortable
). Intente usar unclass
en su lugar.td
s con elcontenteditable
atributo no parecen ser editables si su fila se puede ordenar usando este método. Solo un FYI.Respuestas:
Puede llamar a
sortable
en<tbody>
lugar de en las filas individuales.<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>
Mostrar fragmento de código
$(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>
fuente
<tbody>
a</tbody>
;)