thタグの複製と要素の入れ替えについて

前へ 次へ
このQ&Aのポイント
  • JavaScriptのcloneNodeメソッドを使用することで、thタグを複製しています。cloneNode(true)の場合は、複製元の要素の子要素もすべて複製されます。
  • th.firstChild.data = ths[i];の文は、複製したthタグの最初の子要素のテキストデータをths[i]という変数の値に置き換えています。
  • th = th.cloneNode(true);の行は、新しいthタグの作成を意味しています。この行がないと、複製元のthタグの参照が保持され、要素の入れ替えが正常に行われなくなります。
回答を見る
  • ベストアンサー

th = th.cloneNode(true);

先日回答いただいた内容で分からないことがあったので教えて下さい。 http://jsfiddle.net/6gjfbj9w/ 下記は何をやっているのでしょうか？ ・thタグノードを自身へ複製？ th = th.cloneNode(true); ■自分の理解 th.appendChild(doc.createTextNode('string')); →<th>string</th> th = th.cloneNode(true); →thタグノードを自身へ複製？ th.firstChild.data = ths[i]; →<th>見出1</th> tr.appendChild(th); →<tr><th>見出1</th></tr> th = th.cloneNode(true); →thタグノードを自身へ複製？ →<th>見出1</th>？ th.firstChild.data = ths[i]; →<th>見出2</th> tr.appendChild(th); →<tr><th>見出1</th><th>見出2</th></tr> ■質問 ・下記はなくても良いように思うのですが、コメントアウトすると、期待した動作になりまｓたん ・なぜ必要なのでしょうか？ th = th.cloneNode(true);

  • re97
  • お礼率80% (601/744)

質問者が選んだベストアンサー

  • ベストアンサー
  • think49
  • ベストアンサー率59% (285/482)
回答No.1

http://okwave.jp/qa/q8810003.html で回答したコードですね。 > th = th.cloneNode(true); th要素ノードを複製しています。 https://developer.mozilla.org/ja/docs/Web/API/Node.cloneNode オブジェクトは参照なので同じオブジェクトを使い回してappendChildしたら要素が移動するだけで複数の要素を生成できません。 createElementから作り直すのが一般的だと思いますが、同じような要素を何度も作るのは無駄なので雛形となるth要素ノードを生成しておき、cloneNodeで複製しています。 --- http://okwave.jp/qa/q8810003.html の件。 > ・innerTextを使用するようにしますー innerText はIEの独自拡張であり、全てのブラウザで使用できません。 innerTextを実装されている他のブラウザもありますが、標準化されていない為に挙動が同じ保証もありません。 似たプロパティとして textContent がありますが、innerText とは挙動が異なります。 http://d.hatena.ne.jp/cou929_la/20110517/1305644081 代入する分には textContent, innerText を使い分ければ問題ないかもしれませんが、仕様を追ってないので私からはお勧めできないですね。 IE8- を保証するなら createTextNode が最も無難な選択肢だと思います。 何度か仕様にまつわる質問をされていると思いますが、調べ方を工夫してみて下さい。 仕様のURLをブックマークしておくとか、Google検索でサイト検索してみるとか。 innerTextの件は少し検索すれば分かると思うのですが、おそらくまともに調べていないのではないでしょうか。 http://www.quirksmode.org/dom/html/ https://developer.mozilla.org/ja/docs/Web/API/Node.textContent http://msdn.microsoft.com/en-us/library/ie/ms533899.aspx # Re: re97さん

re97
質問者

お礼

回答ありがとうございました。 ＞オブジェクトは参照なので同じオブジェクトを使い回してappendChildしたら要素が移動するだけ ・参考になりました ＞W3C DOM Compatibility - HTML ・このページ初めて知りました ・見やすいですね ＞標準化されていない為に挙動が同じ保証もありません ・メソッド毎にブラウザ対応状況を確認していく癖をつけた方が良いなと思いました ＞innerTextの件は少し検索すれば分かると思うのですが ・標準的な処理だと思い込んでました…

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • appendChildとinnerHTMLを短く

    テーブルのthタグと内容を追加したい ・下記で期待通り動作するのですが、冗長かなと思い、スッキリさせたいです ・どうすれば良いでしょうか？ var tr = document.createElement("tr"); tbody.appendChild(tr); var th = document.createElement("th"); th.innerHTML = '見出1'; tr.appendChild(th); var th = document.createElement("th"); th.innerHTML = '見出2'; tr.appendChild(th); var th = document.createElement("th"); th.innerHTML = '見出3'; tr.appendChild(th); var th = document.createElement("th"); ……

  • テーブルの変数について

    var i; i=10; <table> <tr> <th>見出し</th> <th>見出し</th> </tr> <tr> <td>i<td> <td>data</td> </tr> </table> このようなプログラムを作ったのですが変数の「i」がそのまま表示されてしまうのでどうしたら「i」の中の数字を表示することができるのしょうか。

  • テーブルの変数について

    var i; i=10; <table> <tr> <th>見出し</th> <th>見出し</th> </tr> <tr> <td>i<td> <td>data</td> </tr> </table> このようなプログラムを作ったのですが変数の「i」がそのまま表示されてしまうのでどうしたら「i」の中の数字を表示することができるのしょうか。初心者なのでまだまだわからないことがたくさんありますがよろしくお願いします。

  • テーブルの行操作について

    下記の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>

  • VB6で、一次元配列と二次元配列の相互コピー

    VB6で、一次元配列と二次元配列の相互コピーをしたいです。 (1)元々下記のような宣言をもつ配列がありました。 Public Type TKey no As String id As String code As String atr() As String End Type Public Type tr Key As TKey atr() As String abc As Boolean End Type Public gtr() As tr (2)コピー用に、下記のような二次元配列用宣言をつくりました。 Public Type TKey2 2no As String 2id As String 2code As String a2tr() As String End Type Public Type 2tr Key22 As TKey2 atr22() As String abc22 As Boolean End Type Public g2tr() As 2tr (3)　　(1)から(2)にデータを複製したり、 (4)　　(2)から(1)にデータを複製したいです。 今は、下記のように面倒くさいことをしています。 dim gtr(maxcnt) ReDim Preserve g2tr(500, maxcnt) ループ g2tr(cnt, i).Key22.2code = gtr(i).Key.code　・・・(3) gtr(i).Key.code = g2tr(j, i).Key22.2code　・・・(4) 　　　　　　今は上記を全ての宣言の配列に実行しています。 なにかもっと効率のよい方法はないでしょうか。 (1)の配列は、1～500くらいはあり、不定です。

  • フォームからPOSTされた値をXMLへ書き込むプログラムなのですが、「

    フォームからPOSTされた値をXMLへ書き込むプログラムなのですが、「あ」を入力するとなにも書き込まれません。 「あ」以外は正常に書き込めるようです。 1日調べてみたのですが、どうしてもわかりません。 教えていただけないでしょうか。 情報が足りないようでしたら出させていただきますのでどうかよろしくお願いします。 $dom = new DomDocument('1.0','utf-8'); $dom->load($FilePath); $data = $dom->documentElement->parentNode->firstChild->appendChild($dom->createElement('data')); $testnode = $data->appendChild($dom->createElement('test')); $testtxt = mb_convert_encoding($_POST['test'],'utf-8','sjis'); $testnode->appendChild($dom->createTextNode($testtxt)); 環境 Windows2008サーバ php5.3.2 IIS7.0

    • ベストアンサー
    • PHP
  • ソースコードの流れについて

    下記ソースコードの流れを詳しく解説していただけませんか。表示結果が理解できません。 class Th extends Thread{ public void run(){ for(int i = 0; i < 2; i++)System.out.print(" "+ Main4_1_49.count + i); } } public class Main4_1_49{ static int count = 0; public static void main(String[] args){ Th[] tr = new Th[6]; for(int i = 0; i < 5; i++){ count++; tr[i] = new Th(); tr[i].setPriority(i * 2 + 1 ); tr[i].start(); } } }

  • HTMLの質問なのかJAVAサーブレットの質問なのか微妙なのですがテー

    HTMLの質問なのかJAVAサーブレットの質問なのか微妙なのですがテーブルを一行に二つ表示したいのですが表示はできるんですが表示位置を中央にすることができなくて困ってます どうすれば中央にすることができますか？ while(rs2.next()){ String name = rs2.getString("st.staff_name"); String kana = rs2.getString("st.staff_kana"); String birthday = rs2.getString("st.birthday"); String sex = rs2.getString("sm.sex"); String blood = rs2.getString("bm.blood_type"); String hight = rs2.getString("st.hight"); String weight = rs2.getString("st.weight"); String reration = rs2.getString("st.reration"); String mobile = rs2.getString("st.mobile_tel"); String tel = rs2.getString("st.tel"); out.println("<br></br><TABLE border=0 align=\"center\"><table border=1 align=\"left\"><tr><th width=150>氏名</th>"); out.println("<td width=200>"+name+"</td></tr><tr>"); out.println("<th>ヨミガナ</th>"); out.println("<td>"+kana+"</td></tr><tr>"); out.println("<th>生年月日</th>"); out.println("<td>"+birthday.replace("-", "/")+"</td></tr><tr>"); out.println("<th>性別</th>"); out.println("<td>"+sex+"</td></tr><tr>"); out.println("<tr><th>身長</th>"); out.println("<td>"+hight+"</td></tr>"); out.println("<tr><th>体重</th>"); out.println("<td>"+weight+"</td></tr>"); out.println("<tr><th>血液型</th>"); out.println("<td>"+blood+"</td></tr>"); out.println("<tr><th>携帯電話番号</th>"); String mtel=""; if(mobile!=null&&mobile.length()>0){ for (int i = 0; i < mobile.length(); i++) { char ch = mobile.charAt(i); if(i==3){ mtel+="-"; } if(i==7){ mtel+="-"; } mtel+=ch; if(mobile.length()==0){ mtel="-"; } } }else{ mtel="不所持"; } out.println("<td>"+mtel+"</td></tr>"); out.println("<tr><th>自宅電話番号</th>"); String ttel=""; for (int i = 0; i < tel.length(); i++) { char ch = tel.charAt(i); if(i==4){ ttel+="-"; } if(i==6){ ttel+="-"; } ttel+=ch; } out.println("<td>"+ttel+"</td></tr>"); out.println("<tr><th>続柄</th>"); out.println("<td>"+reration+"</td>"); out.println("</tr></table>");

  • JavaScriptで関数設定時に引数を指定したい

    状況を説明します ・複数のthにoncklickイベントで同じ関数を呼びたい ・th要素のタグにonclick属性を書くのは同じ記述をたくさん書くことになるのでやりたくない ・JavaScriptでonclick属性に関数を設定したい ・th要素自身を引数としたい ※WindowsXPのIE8で動けばOKです。 (0)ベタ書きするとこんな感じになります。これなら動くことを確認しています。 # <th onclick="func1(this)">… # <th onclick="func1(this)">… # <th onclick="func1(this)">… # <th onclick="func1(this)">… # # function func1(th) { # 　　… # } (1)引数がなければこんな感じになると思います # var ths = $("head").childNodes; # for (var i = 0; i < ths.length; i++) { # 　　ths[i].onclick = func1; # } (2)無名関数ならこんな感じになると思います # var ths = $("head").childNodes; # for (var i = 0; i < ths.length; i++) { # 　　ths[i].onclick = function() { # 　　　　… # 　　} # } しかしこの2つの書き方「(1)(2)」とも、引数を入れようとしたところ どうすればいいかわかりませんでした。 上記の状況を踏まえ… 質問は以下です ・(1)のような書き方で、引数アリの関数を設定する方法 ・(2)のような書き方で、引数アリの関数を無名関数で設定する方法 ・それ以外の代替方法 これを教えてください。 そもそもJavaScriptではできないのであればその旨を教えてください。 よろしくお願いします。

  • クローンすべてをクリックしたときにリスナーが実行

    下記のようにクローンすべてをクリックしたときにリスナーが実行されるようにしたかったのですが、同じクラス名の要素にはなっているもののおそらく配列の順番が違うので結局別要素と判断されてクローンをクリックしても実行されません。 クローンをクリックしても実行できるようにするにはどうすればよいのでしょうか。 イベントリスナーの対象要素を複数してする方法があるのでしょうか？ let createElement = document.createElement('div'); document.body.appendChild(createElement); let className = createElement.className = 'game'; createElement.style.position = 'fixed'; let clone1 = createElement.cloneNode(true); document.body.appendChild(clone1); clone1.style.position = 'fixed'; let clone2 = createElement.cloneNode(true); document.body.appendChild(clone2); clone2.style.position = 'fixed'; createElement.addEventListener('click', ()=> { ~

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する