電子書籍の厳選無料作品が豊富！

テーブルにおける行(セルにプルダウン含む）の追加方法

解決済

  • 質問者：kakiku11
  • 質問日時：
  • 回答数：2件

追加ボタンを押度に，テーブルに１行ずつ追加されるプログラムを組んでいるのですが，追加ボタンを押しても何も起こりません．1行には，テキストボックスとプルダウンメニューの２つのセルが含まれます．テキストボックスのみであれば，追加に成功します．
プルダウンのメニュー項目の追加方法ではなく，プルダウン自体を複製して追加していきたいのですが，参考サイトが見つかりませんでした．また，各行を識別する為一意の名前をつけたいのですが，どう記述したらよろしいでしょうか．
お手数おかけしますが，下記ソースのどこが間違っているのか，どう処理すべきなのかを，ご教示頂けますでしょうか．お願い致します．

<BODY>
<TABLE id="Table1">
<TR>
<td class="cellWhite"><input type="text" value="単語入力" onFocus="cText(this)" onBlur="sText(this)" style="color:#999"></td>

<td bgcolor="#5096C9" width="113px">
<select name="column">
<option value="00">赤</option>
<option value="01">青</option>
<option value="02">黄</option>
</select></td></tr></TABLE>

<INPUT TYPE="button" VALUE="行追加" onclick="addRow()">

<script language="JavaScript">
function addRow() {
　var tbl = document.getElementById("Table1").firstChild;
　if (!tbl.tagName) {
　　　tbl = document.getElementById("Table1");}
　var tr = document.createElement("tr");
　var td1 = document.createElement("td");
　td1.setAttribute("class","cellWhite");
　var tx1 = document.createElement("input");
　tx1.setAttribute("type","text");
　tx1.setAttribute("value","単語入力");
　tx1.setAttribute("onFocus","cText(this)");
　tx1.setAttribute("onBlur","sText(this)");
　tx1.setAttribute("style","color:#999");
　td1.appendChild(tx1);

　var td2 = document.createElement("td");
　var selectName="column";//selectの名前
　var options={0:"赤",1:"青",2:"黄"};
　var c=sel.firstChild;
　while(c){
　　if(c.name==selectName) sel.removeChild(c);
　　　　c=c.nextSibling;}
　　var e=document.createElement("select");
　　e.setAttribute("name",selectName);
　　for(var i in options){
　　　　var o=document.createElement("option");
　　　　o.setAttribute("value",options[i]);
　　　　o.appendChild(document.createTextNode(options[i]));
　　　　e.appendChild(o);}
　　sel.appendChild(e);
　　tr.appendChild(td1);tr.appendChild(td2);tbl.appendChild(tr);}</script>

参考にしたサイトです：
http://oshiete1.watch.impress.co.jp/qa4074195.html
http://okwave.jp/qa299889.html

通報する

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

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： yuu_x
  • 回答日時：

参考までに。



<script type="text/javascript">
/*@cc_on@*/
function addEvent(e, t, f){
e./*@if(1) attachEvent('on' + @else@*/ addEventListener(/*@end@*/ t, f, false);
}

function addRow(trigger){
var table = trigger.ownerDocument.getElementById('Table1');
// 最初の行こぴー
var row = table.rows[0].cloneNode(true);
// 名前は好きなように。
row.id = 'ROW.' + table.rows.length;

// 最初のインプット要素
input = row.getElementsByTagName('INPUT')[0];
// イベント追加
addEvent(input, 'focus', cText);
addEvent(input, 'blur', cText);

// 最初のセレクト要素
select = row.getElementsByTagName('SELECT')[0];
select.name = 'column.' + table.rows.length;

// 最初の tbody に行追加（HTML4.01 の場合 tbody 必須）
table.tBodies[0].appendChild(row);
}

function cText(evt){
var obj = evt.target || evt.srcElement;
// ...
}
</script>
</head>
<body>

<div>
<table id="Table1">
<tbody>
<tr>
<td class="cellWhite">
<input type="text" value="単語入力" style="color:#999">
</td>

<td bgcolor="#5096C9" width="113">
<select name="column">
<option value="00">赤</option>
<option value="01">青</option>
<option value="02">黄</option>
</select>
</td>
</tr>
</tbody>
</table>

<input type="button" value="行追加" onclick="addRow(this)">
</div>

</body>
    • good
    • 0
    • 件
通報する
この回答へのお礼

本当にありがとうございました！cloneNodeの使用方法が大変よくわかりました．ありがとうございます．

通報する
お礼日時：2009/01/07 22:24

No.1

  • 回答者： kztk
  • 回答日時：

問題のボタンを押すと、ブラウザの下の方とかにエラーメッセージが出ませんか？「ページでエラーが発生しました」とか。



で、それをクリックしたらエラーの詳細がでませんか？「エラー:'sel'は宣言されていません。」とか。

それは、ここ↓で

var c=sel.firstChild;

いきなり'sel'という知らない変数が出てきたからです。

このselとは何ですか？参考にされたソース等を確認してください。
    • good
    • 0
    • 件
通報する
この回答へのお礼

アドバイスありがとうございました．参照したサイトにも突然でてきているのですが，そのソースだけならちゃんと動くんです…

通報する
お礼日時：2009/01/09 22:14

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

Q質問する（無料）

ページトップページトップ

おすすめ情報

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報