- ベストアンサー
テーブルの行操作について
下記のJavaScriptの操作で質問があります。 ボタンを押すたびに1行目が最後に追加されていくと考えたのですが、 実際の動作では1行目が複製されず、行の入れ替えになってしまいます。 cloneNodeすれば行の追加になるのはわかりますが、なぜ下記の操作で行の入れ替えになるのでしょうか？ <html> <head> <title>テーブルテスト</title> <script type="text/javascript"> <!-- function testFunction() { tableBody.appendChild(tableBody.childNodes(0)); } --> </script> </head> <body> <table border="1"> <thead> <tr><th>A</th><th>B</th><th>C</th></tr> </thead> <tbody id="tableBody"> <tr><td>foo</td><td>bar</td><td>hoge</td></tr> <tr><td>abc</td><td>def</td><td>ghij</td></tr> </tbody> </table> <input type="button" value="テスト" onclick="testFunction()" /> </body> </html>
- rg2027x
- お礼率100% (2/2)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
未検証(ちょっと当分まともに自分のマシンを使える環境にないので) http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-184E7107 appendChild Adds the node newChild to the end of the list of children of this node.【If the newChild is already in the tree, it is first removed.】 だからかなーと。 #例外投げて欲しいんですがね。
その他の回答 (1)
- yambejp
- ベストアンサー率51% (3827/7415)
＞tableBody.appendChild(tableBody.childNodes(0)); この書き方だとIEでしか通用しなそうですね。 クローンしないでtbodyにアペンドしているので、最初の行を 移動しているのと同等ですね。 こんな風にすると、汎用性があがります。 <script type="text/javascript"> function testFunction() { var tableBody=document.getElementById("tableBody"); var n=tableBody.firstChild; while(n){ if(n.nodeName=="TR") break; n=n.nextSibling; } var clone=n.cloneNode(true); tableBody.appendChild(clone); } </script> <table border="1"> <thead> <tr><th>A</th><th>B</th><th>C</th></tr> </thead> <tbody id="tableBody"> <tr><td>foo</td><td>bar</td><td>hoge</td></tr> <tr><td>abc</td><td>def</td><td>ghij</td></tr> </tbody> </table> <input type="button" value="テスト" onclick="testFunction()" />
お礼
質問後に環境を書き忘れた事に気づきました。申し訳ありません。 他のプログラミング言語だったりすると、同じノードを参照することになるとはいえ、要素数は3個になると思うのです。 最初の行を移動しているのと同等と覚えてしまうしかないのでしょうか。 もともとはソートする方法を探していたため、行の入れ替えになってくれるのはある意味ありがたいのですが、なにか腑に落ちません。
お礼
ツリーの中に既にあった場合は削除されてから追加される仕様になっているのですね。 解決しました。ありがとうございました。