- ベストアンサー
追加ボタンでテーブルの行を追加する
情報登録する画面で既存テーブル（可変のテーブルにしたい）に 情報を追加するのに「追加ボタン」を押すと新規の行が追加されるように したいのですが、どのようにすればいいのでしょうか？ テストで以下のように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>
- machitaka
- お礼率22% (5/22)
- HTML
- 回答数2
- ありがとう数1
- みんなの回答 （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>タグで呼び出す必要があるでしょう。
関連するQ&A
- テーブルの行削除について
以前、テーブルの行追加について教えてもらい出来ましたが 逆に、追加された行を削除する方法を教えてください。 <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()"> <INPUT TYPE="button" VALUE="行削除"> <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>
- ベストアンサー
- JavaScript
- 追加、削除のやり方を教えてください。
追加ボタンを押すと下に列が増えていき削除ボタン を押すと上に削除するやり方をJavaScriptで教えて いただきたいと思います。 <html> <head> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Shift_JIS"> <title>列追加、削除</title> </head> <body> <table border=1> <tr> <th>列1</th> <th>列2</th> <th>列3</th> <th>列4</th> </tr> <tr> <td><input type="text" name="retsu1" value="" size="20" maxlength="10" ></td> <td><input type="text" name="retsu2" value="" size="20" maxlength="10"></td> <td><input type="text" name="retsu3" value="" size="20" maxlength="10"></td> <td><input type="text" name="retsu4" value="" size="20" maxlength="10"></td> </tr> </table> <td ><input type="button" VALUE="追加" ></td > <td ><input type="button" VALUE="削除" ></td > </body> </html>
- ベストアンサー
- JavaScript
- 追加、削除について
以前、行の追加と削除で質問をした者です。 その時、innerHTMLでのやり方を教わりましたが appendChild、removeChildという、メソッドでも 同じことができるのか教えてもらいたいです。 追加ボタンを押すと左のNOが、3,4と下に増える 削除ボタンを押すと戻るというやり方です。 <sample.html> <html> <head> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Shift_JIS"> <title>列追加、削除</title> </head> <body> <table border=1> <col width="150" align="center" style="font-weight:bold"><col span="3"> <tr> <th >No</th> <th >列1</th> <th >列2</th> <th >列3</th> </tr> <tr> <td>1</td> <td><input type="text" name="sankou" value="" size="26" ></td> <td><input type="text" name="sankou" value="" size="26" ></td> <td><input type="text" name="sankou" value="" size="26" ></td> </tr> <tr> <td>2</td> <td><input type="text" name="sankou" value="" size="26" ></td> <td><input type="text" name="sankou" value="" size="26" ></td> <td><input type="text" name="sankou" value="" size="26" ></td> </tr> </table> <table> <tr> <td ><input type="button" VALUE="追加"></td > <td ><input type="button" VALUE="削除"></td > </tr> </table> </body> </html>
- ベストアンサー
- JavaScript
- テーブルの行操作について
下記のJavaScriptの操作で質問があります。 ボタンを押すたびに1行目が最後に追加されていくと考えたのですが、 実際の動作では1行目が複製されず、行の入れ替えになってしまいます。 cloneNodeすれば行の追加になるのはわかりますが、なぜ下記の操作で行の入れ替えになるのでしょうか？ <html> <head> <title>テーブルテスト</title> <script type="text/javascript"> <!-- function testFunction() { tableBody.appendChild(tableBody.childNodes(0)); } --> </script> </head> <body> <table border="1"> <thead> <tr><th>A</th><th>B</th><th>C</th></tr> </thead> <tbody id="tableBody"> <tr><td>foo</td><td>bar</td><td>hoge</td></tr> <tr><td>abc</td><td>def</td><td>ghij</td></tr> </tbody> </table> <input type="button" value="テスト" onclick="testFunction()" /> </body> </html>
- ベストアンサー
- JavaScript
- 動的なtableの値を取得したい
いつもお世話になります。 見よう見まねでやっている超初心者です。 下記の様なテーブル（phpで読み込んでいますので実際は動的です。） の回答ボタンをクリックすると テーブル下の<INPUT type="text" name="kotae">に ボタンをクリックされた行のｂ列の値を入れたいと思っています。 function kaito()をどのように書いたら取得できるか悩んでいます。 初心者なもので具体的な回答でしたら助かります。 ご教授の程どうぞよろしくお願い致します。 <html> <head> <meta content="text/html; charset=utf-8" /> <script> </script> </head> <body> <table width="100" border="1"> <tr> <th width="30" scope="col">a</th> <th width="30" scope="col">b</th> <th width="40" scope="col">c</th> </tr> <tr> <td>1</td> <td>2</td> <td><input type="button" value="回答" onclick="kaito()"/></td> </tr> <tr> <td>5</td><td>3</td> <td><input type="button" value="回答" onclick="kaito()"/></td> </tr> <tr> <td>5</td> <td>4</td> <td><input type="button" value="回答" onclick="kaito()"/></td> </tr> <tr> <td>5</td> <td>5</td> <td><input type="button" value="回答" onclick="kaito()"/></td> </tr> </table> <INPUT type="text" name="kotae" size="12" > </body> </html>
- ベストアンサー
- JavaScript
- ボタンを押してテキストボックスを追加しテーブルの作成
avascriptでテキストボックスを追加したいのです。テーブルを組んで複数のnamaの違うボックスを追加したいです。 下記のようにイメージして書いたのですが、考えが詰まりました。 テーブルでなくても、2列複数行の形になればいいんですが・・・ 教えて下さい。よろしくお願いします。 <script type="text/javascript"> <!-- var tag_num = 4; function myAdd(){ var oTag = document.createElement("input"); oTag.setAttribute("type", "text"); oTag.setAttribute("name", "hoge" + tag_num++); oTag.setAttribute("name", "fuga" + tag_num++); var oDiv = document.getElementById("area"); oDiv.appendChild(oTag); } --> </script> </head> <body> <form id="form1" action="check.php" method="post"> <span id="area"> <table style="text-align: left; width: 100px;" border="1" cellpadding="2" cellspacing="2"> <tbody> <tr> <td><input type="text" name="hoge1" value=""></td> <td><input type="text" name="fuga1" value=""></td> </tr> <tr> <td><input type="text" name="hoge2" value=""></td> <td><input type="text" name="fuga2" value=""></td> </tr> <tr> <td><input type="text" name="hoge3" value=""></td> <td><input type="text" name="fuga3" value=""></td> </tr> </tbody> </table> </span> <input type="button" value="Add" onClick="myAdd()"> </form>
- ベストアンサー
- JavaScript
- テーブル行のクリックでチェックボックスの制御
テーブル行をクリックしたときにその行にあるチェックボックスのON/OFFを 制御したいと思います。 Jqueryで以下サンプルを作成してみました。該当行をクリックするとチェックボックスが ONになったりOFFになったりするのですがチェックボックス自体をクリックするとうまく チェックがONになりません。恐らくチェックボックスをクリックした時はONになっていて、 同時に行をクリックしたとみなされONになっているチェックボックスをOFFにしているのでは ないかと思われます。 チェックボックスをクリックしてもON/OFFがうまくいくようにするためにはどうすればよろしいでしょうか 【サンプル】 <html> <head> <meta charset="UTF-8" /> <script type="text/javascript" src="../jquery-1.6.1.min.js"></script> <script type="text/javascript"> $(function(){ $("#nameTable tr").click(function() { //alert($(data).find(":checkbox").val()); var chk = $(this).find(":checkbox"); if(chk.prop("checked")) { chk.attr("checked", false); } else { chk.attr("checked", true); } }); }); </script> <title>CSS</title> <style type="text/css"> </style> </head> <body bgcolor="rgba(255,0,0,0.15)"> <table id="nameTable" border="1"> <tr><th>名前</th><th>チェックボックス</th></tr> <tr><td>あいうえお</td><td><input type="checkbox" value="1"></td></tr> <tr><td>かきくけこ</td><td><input type="checkbox" value="2"></td></tr> <tr><td>さしすせそ</td><td><input type="checkbox" value="3"></td></tr> <tr><td>たちつてと</td><td><input type="checkbox" value="4"></td></tr> <tr><td>なにぬねの</td><td><input type="checkbox" value="5"></td></tr> </table> </body> </html>
- 締切済み
- JavaScript
- ラジオボタンでの表示の切替方法
2つのラジオボタンの切替によって、表示の切替を行いたいです。 例えば、Aを選択すると(1)の入力フォームが表示され、Bを選択すると(2)が表示したいです。初期表示はAが選択された時と同じ内容となります。 <table align="center" border="0" cellpadding="0" cellspacing="0"> <tr><td><form name="Quick1"> <tr><td>選択</td> <td> <input type="radio" name="A" value="1" checked>A <input type="radio" name="B" value="2">B </td></tr> <tr> <td>(1)</td> <td> <input type="text" size="6" maxlength="5" name="text1" value="">－ <input type="text" size="6" maxlength="5" name="text2" value="">－ <input type="text" size="6" maxlength="5" name="text3" value=""> </td></tr> <tr> <td>(2)</td> <td> <input type="text" name="text7" size="43" value=""> </td></tr> </table></form></td></tr></table> すみませんが、よろしくお願い致します。
- ベストアンサー
- JavaScript
- VBAでWebページに入力&ボタンクリック
URLがhttp://xxx.com/のページで次のようなフォームのときExcelで自動入力クリックするマクロを作りたいです。 <input type="hidden" name="room" value="aaaaa"/> <a name="regist" id="regist">総登録数</a> <table width="402" border="1"> <tr> <th align="center" colspan="2"><div align="left"><big>登録ページ</big></div></th> </tr> <tr> <td colspan="2"> name <input type="text" size="20" name="name" value="" maxlength="20"> Email <input type="text" size="20" name="email" value=""> </td> </tr> <tr> <td align="center">pass</td> <td><input type="text" size="20" name="pw" maxlength="12" value=""></td> </tr> <tr> <td align="center">category</td> <td><select size="1" name="junle"> <option value="pp" selected="selected">カテゴリ選択</option> <option value="0">その１</option> <option value="1">その２</option> </select></td> </tr> <tr> <td align="center">title</td> <td><input type="text" size="55" name="title" maxlength="25" value=""></td> </tr> <tr> <td align="center">URL</td> <td><input type="text" size="55" name="url"></td> </tr> <tr> <td align="center">intro</td> <td><input type="text" name="comment" size="55" maxlength="50" value=""></td> </tr> <tr align="center"> <td><br></td> <td><input type="submit" name="mode" value="登録"> <input type="reset" value="クリア"></td> </tr> </table> 入力する内容は１行目のA,B,C・・にname,email,pass・・・が順番にそれぞれ入っています。
- ベストアンサー
- オフィス系ソフト
- マウスカーソルを乗せた時にテーブルの行の色を変える
マウスカーソルがテーブルの行の上に来た時に行の色を変えたくて 以下のようにCSSとHTMLを書いてみました。 しかし、何の変化もありませんでした。どこが悪いのかわかりますでしょうか。 【CSS】 table tr:hover { background:red; } 【HTML】 <html> <head> <script type="text/javascript" src="./jquery-1.9.1.js"></script> <link rel="stylesheet" href="test.css" type="text/css"> <script> </script> </head> <body> <table border="1"> <thead> <tr> <th>名前</th> <th>金額</th> </tr> </thead> <tbody> <tr> <td>abc</td> <td>3000</td> </tr> <tr> <td>xyz</td> <td>100</td> </tr> <tr> <td>myk</td> <td>20000</td> </tr> </tbody> </table> </body> </html>
- ベストアンサー
- CSS
補足
JavaScript ではできますか？