- ベストアンサー
TRタグの入れ子におけるchildNodesの使い方
Javascriptにおいて、TRタグが入れ子状態になっている時に、 「childNodes」で子供のTRタグを取得することはできないので しょうか？具体的には、以下のようなスクリプトを組んだ場合に、 c_obj_list[3] には子供のTRタグが格納されるのかと思ったのです が、そうはならないようです。子供のTRタグ配下のタグに操作を 行いたいのですが、どうやったら子供のTRタグ配下のタグに辿り 着くでしょうか？ ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS"></meta> <title></title> <script> function func(obj){ var p_obj=obj.parentNode; var pp_obj=p_obj.parentNode; var c_obj_list=pp_obj.childNodes; alert("c0="+c_obj_list[0].nodeName); alert("c1="+c_obj_list[1].nodeName); alert("c2="+c_obj_list[2].nodeName); alert("c3="+c_obj_list[3].nodeName); } </script> </head> <body> <table col="4"> <tr> <td><input type="checkbox" onclick="func(this)"/></td> <td colspan="2"><textarea style="width:298px;overflow:hidden;">あああ</textarea></td> <td><textarea style="width:300px;overflow:hidden;" >いいい</textarea></td> <tr> <td width="20"></td> <td><input type="checkbox" onclick="func(this)"/></td> <td><textarea style="width:274px;overflow:hidden;">ううう</textarea></td> <td><textarea style="width:300px;overflow:hidden;" >えええ</textarea></td> </tr> </tr> </table> </body> </html>
- e-kameda
- お礼率88% (16/18)
- JavaScript
- 回答数2
- ありがとう数8
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
tr要素は入れ子になる要素ではありません。Javascriptではなく、htmlに関する理解の問題です。 実際、Firefox, Opera, IEではtr要素は入れ子になるとは解釈されず、2つのtr要素が並列にある(2行ある)として解釈されるようです。その結果、tr要素の子要素としてtr要素を探しても見つからないことになります。
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
<tr>の子要素は<th>、<td>のどちらかなのでは？ 表示上どうしてもｔｒを入れ子にしたいのなら、子要素としてtableを入れることになりますが、その場合でも、 <tr><table></table></tr> ではなく、 <tr><td><table></table></td></tr> になると思われます。
お礼
ご返事が遅くなりました． <tr>の理解を間違えていたようです。 テーブルの入れ子も考えたのですが、思った通りの表示にならない ため、<tr>の入れ子で頑張っています。 やりたいことは、「childNodes」ではなく 「nextSibling」を使用してできるようになりました。 ありがとうございました！！
関連するQ&A
- width指定したTDでwhite-space:nowrapが効かない
width指定したTDでwhite-space:nowrapが効かない ブラウザはIE6～8のみを想定しています。 下記のHTMLでは、2行目は正常なのですが、1行目のnowrapが働かず、改行がかかってしまいます。 列毎に幅を指定する必要があるので、1行目にはwidthを指定しているのですが、 どのようにすれば自動改行を禁止できるでしょうか。 <table style="table-layout: fixed;"> <tr> <td style="width: 50px; overflow: hidden; white-space: nowrap;">あああああああ</td> <td style="width: 70px; overflow: hidden; white-space: nowrap;">あああああああ</td> </tr> <tr> <td style="overflow: hidden; white-space: nowrap;">あああああああ</td> <td style="overflow: hidden; white-space: nowrap;">あああああああ</td> </tr> </table>
- ベストアンサー
- HTML
- IEではうまく行くのですが他のブラウザでも表示できるように…
下記のようにしたのですが、IEではうまくゆくのですが、 他のブラウザではできません。 同じようにするにはどのように調整したらよいのか教えてください。 <DIV> <SPAN style="overflow:hidden;width:30px"> <TABLE border="1" width="100%"> <TR bgcolor="silver"><TD>A</TD></TR> </TABLE> </SPAN> <SPAN id="title" style="overflow-y:scroll;overflow-x:hidden;width:150px;"> <TABLE border="1" style="table-layout:fixed;width:150px"> <TR bgcolor="silver"><TD>C</TD><TD>D</TD><TD>E</TD></TR> </TABLE> </SPAN> </DIV> <!--本体部分--> <DIV> <SPAN id="fixedcols" style="overflow:hidden;overflow-x:scroll;width:30px;height:80px;"> <TABLE border="1" style="width:100%" bgcolor="#ffffcc"> <TR><TD>F</TD></TR> <TR><TD>K</TD></TR> <TR><TD>P</TD></TR> <TR><TD>U</TD></TR> </TABLE> </SPAN> <SPAN id="maincols" style="overflow:scroll;width:150px;height:80px" onscroll="fnc_scroll()"> <TABLE border="1" style="table-layout:fixed;width:150px"> <TR><TD>H</TD><TD>I</TD><TD>J</TD></TR> <TR><TD>M</TD><TD>N</TD><TD>O</TD></TR> <TR><TD>R</TD><TD>S</TD><TD>T</TD></TR> <TR><TD>W</TD><TD>X</TD><TD>Y</TD></TR> </TABLE> </SPAN> </DIV> <SCRIPT language="javascript"> <!-- function fnc_scroll(){ document.all.item('fixedcols').scrollTop=document.all.item('maincols').scrollTop; document.all.item('title').scrollLeft=document.all.item('maincols').scrollLeft; } --> </SCRIPT>
- ベストアンサー
- JavaScript
- tableタグについて
tableタグの挙動について教えてください。 下記のタグで、tableの幅は240pxにしたいのですが、 ブラウザ表示（Chrome）では230pxとなりました。 この10pxの隙間はどこで発生しているのでしょうか？ どうぞよろしくお願いします。 ーーーーHTMLーーーーー <body style="width:240px;margin:0 auto;"> <div class="list-box"> <table width="240" border="0" cellspacing="0" cellpadding="0"> <tbody><tr> <td>テキスト/td> <td>テキスト/td> </tr> </tbody></table> </div> </body> ーーーーCSSーーーーー .list-box{margin:0 auto;} .list-box table{ width:100%;} .list-box table td:first-child{ background:#900;} .list-box table td:last-child{ background:#069;}
- ベストアンサー
- CSS
- ＜TR>のマージン設定したい
<table border=1 width=100% style="margin:10px"> <tr style="margin:10px"> <td width=30>a</td><td>a</td><td>a</td> </tr> <tr> <td>a</td><td>a</td><td>a</td> </tr> </table> この2行のテーブルなのですがtrの間を広げたいのですが 何か方法は無いでしょうか。 styleでmarginやpaddingがあったのですが、テーブル全体にたいしてはできるのですが、 テーブルの中身に対しては、出来ないみたいで困っています。 よろしくお願いいたします
- ベストアンサー
- HTML
- IEでFORMタグを入れると空白ができる
IEだけなのですがFORMタグを入れるとTABLEとTABLEの間に空白ができます。 自分なりに切り分けをしたみたところ下記のような結果になりました。 １、XHTML1.0をHTML4.0に変更すると正常に表示 ２、Firefoxで開くと正常に表示 ３、FORMタグを外すと正常に表示 ４、このhtmlファイルをローカル(自身のPC上)で表示すると正常に表示 (Webサーバにアップロードすると現象が現れる) ソースは以下の通りです <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <table border="0" width="800"><tr> <td><font color="#000080"><b>サブメニュー</b></font></td> <td width="20"></td> <td align="right"> <input type="button" value="戻る" onclick=window.open("http://www.xxxx.xxx/xxx.html","_top")> </td></tr></table> ※この間に空白ができます※ <table border="1" cellspacing="0" cellpadding="5" width="800"> <tr><th nowrap class="l" width="270">商品A</th> <th nowrap class="l" width="100">商品A</th> <th nowrap class="l" width="270">商品名B</th> <th nowrap class="l" width="100">商品B</th> <p></tr> <tr> <form action="./xxx.cgi" method="post" style="margin:0px"> <input type="hidden" name="view" value="0"> <input type="hidden" name="pick" value="0"> <input type="hidden" name="back" value=""> <td valign="top" width="270">あ</td> <td nowrap align="center" valign="top" width="100">あ</td></form> <form action="./xxx.cgi" method="post" style="margin:0px"> <input type="hidden" name="view" value="0"> <input type="hidden" name="pick" value="0"> <input type="hidden" name="back" value=""> <td valign="top" width="270">あ</td> <td nowrap align="center" valign="top" width="100">あ</td></form> </tr> <tr> <form action="./xxx.cgi" method="post" style="margin:0px"> <input type="hidden" name="view" value="0"> <input type="hidden" name="pick" value="0"> <input type="hidden" name="back" value=""> <td valign="top" width="270">あ</td> <td nowrap align="center" valign="top" width="100">あ</td></form> <form action="./xxx.cgi" method="post" style="margin:0px"> <input type="hidden" name="view" value="0"> <input type="hidden" name="pick" value="0"> <input type="hidden" name="back" value=""> <td valign="top" width="270">あ</td> <td nowrap align="center" valign="top" width="100">あ</td></form> </tr> </table> </p> </html> 実際にはもっと長い表になるのですが<tr></tr>を増やせば増やすほど空白が大きくなります。 どうすれば解消できるでしょうか ご存知の方がいらっしゃいましたらご教授願います。 いろいろなサイトを拝見して試してみましたが解決できないのでよろしくお願いします。
- ベストアンサー
- HTML
- 特定のセルの値のみ改行しないようにするには？
<table border="1" width="100px" style="table-layout:fixed;"> <tr> <td>あいうえお</td> <td nowrap>かきくけこ</td> </tr> <tr> <td>さしすせそ</td> <td>たちつてと</td> </tr> </table> 上記のコードを実行すると「かきくけこ」とかかれた行だけ改行されなくなります。 この「table-layout:fixed」以外を使って上記のように、「かきくけこ」だけ 改行されないようにするにはどうすればいいでしょうか？ 調べていて「overflow:hidden」というのを見つけましたが、 やり方が悪いのかうまくいきませんでした。 よろしくお願いします
- 締切済み
- HTML
- DIVタグでの擬似インラインフレーム
<DIV>タグで擬似インラインフレームを実現させようと思っています。 <DIV>タグ内に<table>タグがあって、<td>タグ内に<A>タグテキストリンクがある場合に、そのリンクを右クリックしてプロパティを表示させると、 <DIV>タグの位置がずれてしまいます。 ・動作テスト OS：WindowsXP SP１ ブラウザ：IE6 ・テキストリンク<a>タグを右クリックしてプロパティを表示させたときのみ発生する。 ・NN7.1では発生しません。 原因がまったくわかりません。 簡単な例↓ <DIV style="width:640px;height:350px;overflow:scroll;"> <table width=620px><tr><td><A href=http://www.yahoo.co.jp>YAHOO</A></td></tr></table> </DIV> 以上のような感じです。 しかし、実際に操作していただくと、何が問題なのかがわかると思いますので、以下のページを参照してください。 http://members3.jcom.home.ne.jp/takokko/divframetest.html 大変困っております。なにとぞ、宜しくお願いいたします。
- ベストアンサー
- HTML
- <tr>の背景画像について
お世話になっております。 表題のとおりなのですが、 <table width="500px"> <tr style="background-image:url('back.gif');"> として、 back.gifが500pxの画像だとします。 <tr style="background-image:url('back.gif');"> <td>aaaa</td> </tr> と、tdが1つだった場合は問題ないのですが、 <tr style="background-image:url('back.gif');"> <td>aaaa</td> <td>bbbb</td> </tr> とした場合、250pxが2枚繰り返しのような状態になってしまいます。 これを回避し、tdが何個になっても、trの画像を1枚で表示させることはできないでしょうか。 ちなみに、背景画像は500px固定です。短く切ってリピートはできない状態です。 よろしくお願いします。
- ベストアンサー
- HTML
- <tr>タグ、<td>タグ
テーブルでレイアウトを行い、htmlで背景色・cssで文字のスタイルを適用する場合、<tr>タグと<td>タグのどちらに記述するのがよいのでしょうか。IEだと大差は無いようなのですが、firefoxやNetscapeで違いが出てくるように感じます（特にfirefox）。 (1)cssで文字スタイルの場合、<table>タグに<table class="text">といった感じで問題ないでしょうか（table内の文字すべてclassがtextの場合）。それともやはり<td>タグひとつひとつにクラス指定した方が良いのでしょうか。 (2)テーブルに背景色を指定する場合、<tr>タグ・<td>タグのどちらに指定するのが良いのでしょうか。
- ベストアンサー
- HTML
- tdタグに何も入れなくとも幅を均一にする方法
<table border = "1"> <tr> <th>hoge</th> <td></td> </tr> </table> 上記のような場合、<td>タグ内には何も書かれてないので セルがつぶされた形で表示されますよね？ これを<th>タグ内のhogeと同じセルの幅で表示するにはどうすればいいですか？ style属性にwidth:100pxとかしてみたのですが無駄でした‥
- ベストアンサー
- HTML
お礼
ご返事が遅くなりました． <tr>の理解を間違えていたようです。 ただ、どうしても入れ子で使いたい訳があるため、 ご指摘の内容をうけて「childNodes」ではなく 「nextSibling」を使用したら、やりたいことが できるようになりました。 ありがとうございました！！