Ich möchte einige Daten aus der Datenbank in einer HTML-Tabelle ausgeben und möchte, dass der Benutzer Tabellenzeilen neu anordnen kann. Um dies zu erreichen, habe ich jQuery UI sortierbar verwendet, also:
<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>";
}
?>
Das Problem ist, dass beim Ziehen einer Tabelle tr
nur diese td
gezogen werden. Außerdem und vor allem ist nur die erste Zeile ziehbar: Der Effekt wird nicht auf andere Zeilen angewendet. Wie kann ich das lösen?
jquery
jquery-ui
html-table
jquery-ui-sortable
Samer El Gendy
quelle
quelle
id
Attribute müssen innerhalb eines Dokuments eindeutig sein. Ihr Code erstellt mehrere Elemente mit demselbenid
(sortable
). Versuchen Sieclass
stattdessen ein.td
s mit demcontenteditable
Attribut scheinen nicht bearbeitbar zu sein, wenn ihre Zeile mit dieser Methode sortiert werden kann. Nur zu Ihrer Information.Antworten:
Sie können
sortable
a<tbody>
anstelle der einzelnen Zeilen aufrufen .<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>
Code-Snippet anzeigen
$(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>
quelle
<tbody>
in</tbody>
;)