Chcę wyprowadzić niektóre dane z bazy danych w tabeli HTML i chcę, aby użytkownik mógł zmieniać kolejność wierszy tabeli. Aby to osiągnąć, użyłem sortable jQuery UI, a więc:
<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>";
}
?>
Problem polega na tym, że kiedy przeciągam tabelę tr
, tylko td
są przeciągane. Co najważniejsze, tylko pierwszy wiersz można przeciągać: efekt nie jest stosowany do innych wierszy. Jak mogę to rozwiązać?
jquery
jquery-ui
html-table
jquery-ui-sortable
Samer El Gendy
źródło
źródło
id
atrybuty muszą być unikalne w dokumencie. Twój kod tworzy kilka elementów o tej samejid
(sortable
). Spróbujclass
zamiast tego użyć .td
zcontenteditable
atrybutem nie wydają się być edytowalne, jeśli ich wiersz można posortować za pomocą tej metody. Tylko do Twojej wiadomości.Odpowiedzi:
Możesz wywołać
sortable
a<tbody>
zamiast w poszczególnych wierszach.<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>
Pokaż fragment kodu
$(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>
źródło
<tbody>
na</tbody>
;)