こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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

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

<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

投稿日時 - 2009-01-06 23:38:01

QNo.4609749

すぐに回答ほしいです

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

参考までに。

<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>

投稿日時 - 2009-01-07 03:12:42

お礼

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

投稿日時 - 2009-01-07 22:24:28

ANo.2

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.1

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

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

それは、ここ↓で

var c=sel.firstChild;

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

このselとは何ですか?参考にされたソース等を確認してください。

投稿日時 - 2009-01-07 01:51:27

お礼

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

投稿日時 - 2009-01-09 22:14:26

あなたにオススメの質問