jQueryで行の移動

解決済

質問者：198307040628
質問日時：2012/07/24 00:33
回答数：2件

ｊQueryでテーブルの行を移動させたいのですが、なかなかうまくいきません。

<table id = "table_test">
<tbody id = "test1">
<tr>
<th>見出し1</th>
<th>見出し2</th>
<th><input type="button" id="button1" value="テスト1"></th>
</tr>
<tr>
<td>項目1</td>
<td>項目2</td>
<td>項目3</td>
</tr>
</tbody>
<tbody id = "test2">
<tr>
<th>見出し1</th>
<th>見出し2</th>
<th><input type="button" id="button2" value="テスト2"></th>
</tr>
<tr>
<td>項目1</td>
<td>項目2</td>
<td>項目3</td>
</tr>
</tbody>
<tbody id = "test3">
<tr>
<th>見出し1</th>
<th>見出し2</th>
<th><input type="button" id="button3" value="テスト3"></th>
</tr>
<tr>
<td>項目1</td>
<td>項目2</td>
<td>項目3</td>
</tr>
</tbody>
</table>

処理としては、button1を押下したら、<tbody id = "test1">～</tbody>の内容を<tbody id = "test2">と<tbody id = "test3">の間にくるように移動させたいです。

trの内容を次のtrの次に移動させることは調べてわかったのですが、tbodyで囲まれている部分をごっそり抜き出して、次のtbodyの後に移動させる方法がわかりません。

tbody内にはtrが複数あるため、移動させるというよりは、追加させてから削除するといった感じになるのでしょうか？

どなたかご教授お願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： fujillin
回答日時：2012/07/24 21:08

＞画面の仕様上どうしてもjQueryでやらなければならないのです

#1様の回答でよければ、そのままjQueryでも使えるはずですが・・・？

- 1
- 件

通報する

この回答へのお礼

お礼が遅くなりすみません。
参考にしてうまくできました！
ありがとうございます！

通報する

お礼日時：2012/08/02 12:49

No.1

回答者： babu_baboo
回答日時：2012/07/24 01:46

こんばんは。

どれだけ jQuery が、万能なのかは知りませんが、是が非でもそれを使わなければ駄目ですか？
全角空白は、半角に置き換えて。

<!DOCTYPE html>
<title>行を入れ替える</title>
<body>
<table id = "table_test">
<tbody id = "test1">
<tr>
<th>見出し1</th>
<th>見出し2</th>
<th><input type="button" id="button1" value="テスト1" onclick="a(0,2)"></th>
</tr>
<tr>
<td>項目1</td>
<td>項目2</td>
<td>項目3</td>
</tr>
</tbody>
<tbody id = "test2">
<tr>
<th>見出し1</th>
<th>見出し2</th>
<th><input type="button" id="button2" value="テスト2" onclick="a(1,100)"></th>
</tr>
<tr>
<td>項目1</td>
<td>項目2</td>
<td>項目3</td>
</tr>
</tbody>
<tbody id = "test3">
<tr>
<th>見出し1</th>
<th>見出し2</th>
<th><input type="button" id="button3" value="テスト3"></th>
</tr>
<tr>
<td>項目1</td>
<td>項目2</td>
<td>項目3</td>
</tr>
</tbody>
</table>
<script>

function a (b, c) { // b を c の前に
　var d = document.getElementById ('table_test');
　var e = d.tBodies;
　var f = e[c];
　
　f ? d.insertBefore (e[b], f): d.appendChild (e[b]);
};

</script>