解決済み

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

  • すぐに回答を!
  • 質問No.299889
  • 閲覧数2760
  • ありがとう数1
  • 気になる数0
  • 回答数2
  • コメント数0

お礼率 22% (5/22)

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

テストで以下のように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>

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

  • 回答No.2

ベストアンサー率 77% (132/170)

単なるサンプルです。古いブラウザでは動作しません。

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

  • 回答No.1

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

お礼率 22% (5/22)

JavaScript ではできますか?
投稿日時 - 2002-06-25 17:55:54
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,500万件のQ&Aを分析して最適な回答をご提案します。

こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する

特集


感謝指数をマイページで確認!

ピックアップ

ページ先頭へ