[解決済み] HTMLテーブルでjQuery UIのソートを使用する
2023-05-29 06:18:32
質問
私はデータベースからいくつかのデータを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>";
}
?>
問題は、テーブルをドラッグすると
tr
をドラッグすると
td
だけがドラッグされます。また、最も重要なことは、最初の行だけがドラッグ可能で、他の行には効果が適用されないことです。どのように私はこれを解決することができますか?
どのように解決するのですか?
以下のように
sortable
の上で
<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>
$(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>
関連
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには?
-
[解決済み] jQueryでチェックボックスに "checked "を設定する
-
[解決済み] jQueryの「exists」関数はありますか?
-
[解決済み] jQueryでページを更新するにはどうすればよいですか?
-
[解決済み] jQueryでテーブルの行を追加する
-
[解決済み] jQueryで要素にスクロールする
-
[解決済み] jQueryで入力を無効化/有効化する?
-
[解決済み] チェックボックスがチェックされた場合のjQuery
-
[解決済み】jQueryでチェックボックスがチェックされているかどうかを確認するにはどうすればよいですか?
-
[解決済み】フォームのhiddenフィールドにjQueryの".val() "を使って値を設定してもうまくいかない。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
Uncaught TypeError: 未定義のプロパティ 'length' を読み取れませんでした。
-
[解決済み] Select <a> which href ends with some string
-
[解決済み] jQueryを使って「Please Wait, Loading...」というアニメーションを作成するにはどうすればよいですか?
-
[解決済み] jQueryでフォームフィールドをクリアする
-
[解決済み] jQuery: outer html() [重複]。
-
[解決済み] jQuery OR Selector?
-
[解決済み] jQueryのn番目の要素を取得する方法
-
[解決済み】jQueryで入力不可属性をトグルする。
-
[解決済み】jQueryがリクエストボディに有効なjsonを投稿する。
-
[解決済み】iPad版SafariでjQueryを使ってタッチイベントを認識させる方法は?可能でしょうか?