追加ボタンでテーブルの行を追加する

解決済

質問者：machitaka
質問日時：2002/06/25 17:00
回答数：2件

情報登録する画面で既存テーブル（可変のテーブルにしたい）に
情報を追加するのに「追加ボタン」を押すと新規の行が追加されるように
したいのですが、どのようにすればいいのでしょうか？

テストで以下のようにHTMLを書いているのに対して
いい方法を教えてください。
ーーーーーーーーーーーーーーーー
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Shift_JIS">
<TITLE>行追加</TITLE>
</HEAD>
<BODY>

<TABLE BORDER="1">
<TR>
<TH>タイトルA</TH>
<TH>タイトルB</TH>
</TR>
<TR>
<TD>><INPUT TYPE="text" SIZE="18" MAXLENGTH="18" NAME="A" VALUE=""><//TD>
<TD><INPUT TYPE="text" SIZE="18" MAXLENGTH="18" NAME="B" VALUE=""></TD>
</TABLE>
<INPUT TYPE="button" VALUE="行追加">

</CENTER>
</BODY>
</HTML>

通報する

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

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： FlossenEngel
回答日時：2002/06/25 20:01

単なるサンプルです。

古いブラウザでは動作しません。

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Shift_JIS">
<TITLE>行追加</TITLE>
</HEAD>
<BODY>

<TABLE BORDER="1" id="Table1">
<TR>
<TH>タイトルA</TH>
<TH>タイトルB</TH>
</TR>
<TR>
<TD><INPUT TYPE="text" SIZE="18" MAXLENGTH="18" NAME="A" VALUE=""></TD>
<TD><INPUT TYPE="text" SIZE="18" MAXLENGTH="18" NAME="B" VALUE=""></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");
var tx1 = document.createElement("input");
tx1.setAttribute("type","text");
tx1.setAttribute("size","18");
tx1.setAttribute("maxlength","18");
tx1.setAttribute("name","Cn");
tx1.setAttribute("value","");
td1.appendChild(tx1);
var td2 = document.createElement("td");
var tx2 = document.createElement("input");
tx2.setAttribute("type","text");
tx2.setAttribute("size","18");
tx2.setAttribute("maxlength","18");
tx2.setAttribute("name","Cn");
tx2.setAttribute("value","");
td2.appendChild(tx2);
tr.appendChild(td1);
tr.appendChild(td2);
tbl.appendChild(tr);
}
</script>

</BODY>
</HTML>