- ベストアンサー
追加ボタンでテーブルの行を追加する
情報登録する画面で既存テーブル（可変のテーブルにしたい）に 情報を追加するのに「追加ボタン」を押すと新規の行が追加されるように したいのですが、どのようにすればいいのでしょうか？ テストで以下のように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）
- 専門家の回答
質問者が選んだベストアンサー
単なるサンプルです。古いブラウザでは動作しません。 <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>
その他の回答 (1)
HTMLだけで実現することはできません。Perl等でCGIスクリプトを書き、<form>タグで呼び出す必要があるでしょう。
補足
JavaScript ではできますか？