• ベストアンサー

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

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

  • HTML
  • 回答数2
  • ありがとう数1

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

  • ベストアンサー
回答No.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)

noname#225520
noname#225520
回答No.1

HTMLだけで実現することはできません。Perl等でCGIスクリプトを書き、<form>タグで呼び出す必要があるでしょう。

machitaka
質問者

補足

JavaScript ではできますか？

すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

質問する