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>

このQ&Aに関連する最新のQ&A

A 回答 (2件)

tr要素は入れ子になる要素ではありません。

Javascriptではなく、htmlに関する理解の問題です。

実際、Firefox, Opera, IEではtr要素は入れ子になるとは解釈されず、2つのtr要素が並列にある(2行ある)として解釈されるようです。その結果、tr要素の子要素としてtr要素を探しても見つからないことになります。
    • good
    • 0
この回答へのお礼

ご返事が遅くなりました.
<tr>の理解を間違えていたようです。
ただ、どうしても入れ子で使いたい訳があるため、
ご指摘の内容をうけて「childNodes」ではなく
「nextSibling」を使用したら、やりたいことが
できるようになりました。

ありがとうございました!!

お礼日時:2009/05/30 19:54

<tr>の子要素は<th>、<td>のどちらかなのでは?



表示上どうしてもtrを入れ子にしたいのなら、子要素としてtableを入れることになりますが、その場合でも、
 <tr><table></table></tr>  ではなく、
 <tr><td><table></table></td></tr>
になると思われます。
    • good
    • 0
この回答へのお礼

ご返事が遅くなりました.
<tr>の理解を間違えていたようです。
テーブルの入れ子も考えたのですが、思った通りの表示にならない
ため、<tr>の入れ子で頑張っています。
やりたいことは、「childNodes」ではなく
「nextSibling」を使用してできるようになりました。

ありがとうございました!!

お礼日時:2009/05/30 19:57

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qテーブルタグの中にdivを含めてはダメ?

テーブルタグの中にdiv要素を入れるとダメなのでしょうか?
何か不都合でもあるのでしょうか?
何かご存知の方がいれば教えていただけませんか?

Aベストアンサー

以下、HTML 4.01での話です。(XHTMLでもほぼ同じだと思います)

tableタグ直下に書けるのは、caption,col,colgroup,head,tfoot,tbodyと定義されています。
特定の条件下でtbodyが省略できますので、実際はtrも書けます。これら以外は書けないことになっています。
tr直下にはth,tdが書けることになっています(それ以外は不可)。

th,tdの下にはブロック要素が書けるので、divも書けます。

このように、テーブル内でth,tdの中以外でdivが使えないのはHTMLの仕様でそう決まっているからです。

Qテーブルの入れ子について

このようにテーブルを入れ子にするのは不可能なのでしょうか?

<table>
 <tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
  <td>4</td>
 </tr>
 <tr>
  <td colspan="4">
    <table>
     <tr>
     <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
     </tr>
    </table>
  </td>
 </tr>
</table>

cssなどでいろいろと設定しても、
「5・6・7・8」のセルが「1」のセルの幅にしかなりません。
colspanしているセル全体にテーブルを置きたいのですが・・・。

間違いを教えて下さい。
よろしくお願いします。

Aベストアンサー

No.1です。
図で解説すると・・tableのcellは内容の量に比例して配分されるので図の上になる。
tableの子孫のtableについてのみセル内100%幅なら
table table{}
table tbody tr table{
table tbody td table{
table tr td table{
table tbody table{
table tbody td table{
table tr td table{
table tr table{
td>table{ /*子供*/
・・どれでもよいけど、詳細度で他と区別したけりゃ適当なものを

Q特定内の
の色を変える

お世話になります。
特定<table>内の<td>の色を変える
<table id="abc">
<tr>
<td>あああああ</td>
<td>いいい</td>
<td>ううう</td>
</tr>
</table>
<table>にはidを定義します。
その<td>タグにはidを定義していません。
このとき、あああああ、いいい、うううの表示色を
<input type="button" value="色を変える" onClick="ChngColor()">

なんてことで、
マウスをクリックすることにより変更できないものでしょうか。
よろしくお願いいたします。

Aベストアンサー

#1さんへの補足より――

> functio ChngColor(){
> var Obj=document.getElementById('abc');
> Obj=document.getElementsByTagName("td");
> for (var i=0;i<Obj.length;i++){
> Obj.style.color="red";
> }
> }

特に3行目がいけない。こう変えましょう。
(あと、詰めすぎは見づらいので、適当に空白を入れました)

function ChngColor() {
var Obj1 = document.getElementById('abc');
var Obj2 = Obj1.getElementsByTagName("td");
for (var i = 0; i < Obj2.length; i++) {
Obj2[i].style.color = "red";
}
}

Qjavascriptでセレクトボックスの"selected"を動的につ

javascriptでセレクトボックスの"selected"を動的につける方法について質問させてください。

現在、以下のようなフォームを作成しました。

<select name='year'>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
</select>月

<select name='day'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
<option value='13'>13</option>
<option value='14'>14</option>
<option value='15'>15</option>
<option value='16'>16</option>
<option value='17'>17</option>
<option value='18'>18</option>
<option value='19'>19</option>
<option value='20'>20</option>
<option value='21'>21</option>
<option value='22'>22</option>
<option value='23'>23</option>
<option value='24'>24</option>
<option value='25'>25</option>
<option value='26'>26</option>
<option value='27'>27</option>
<option value='28'>28</option>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>日


このセレクトボックスに、例えば今日の日付"2010年9月30日"だったら、それぞれの年、月、日の<option>に"selected"をつけたいのですが、javascriptではどのようにして実現したら良いのでしょうか?

よろしくお願いします。

javascriptでセレクトボックスの"selected"を動的につける方法について質問させてください。

現在、以下のようなフォームを作成しました。

<select name='year'>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8...続きを読む

Aベストアンサー

こんな感じで・・・

<script>
window.onload=function(){
var f=document.getElementById("f0");
var ymd=new Date();
checkSelect(f.elements["year"],ymd.getFullYear());
checkSelect(f.elements["month"],ymd.getMonth() +1);
checkSelect(f.elements["day"],ymd.getDate());
}
function checkSelect(obj,val){
for(var i=0;i<obj.length;i++){
if(obj[i].value==val){
obj[i].selected=true;
break;
}
}
}
</script>
<form id="f0">
<div>
<select name='year'>
<option value='2009'>2009</option>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
</select>月

<select name='day'>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>日
</div>
</form>

こんな感じで・・・

<script>
window.onload=function(){
var f=document.getElementById("f0");
var ymd=new Date();
checkSelect(f.elements["year"],ymd.getFullYear());
checkSelect(f.elements["month"],ymd.getMonth() +1);
checkSelect(f.elements["day"],ymd.getDate());
}
function checkSelect(obj,val){
for(var i=0;i<obj.length;i++){
if(obj[i].value==val){
obj[i].selected=true;
break;
}
}
}
</script>
<form id="f0">
<div>
<select name='year'>
<opt...続きを読む


人気Q&Aランキング

おすすめ情報