- ベストアンサー
追加、削除のやり方を教えてください。
追加ボタンを押すと下に列が増えていき削除ボタン を押すと上に削除するやり方を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>
- sankou
- お礼率4% (6/129)
- JavaScript
- 回答数5
- ありがとう数1
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
IE,FireFox兼用版 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Shift_JIS"> <title>列追加、削除</title> <style> <!-- .No { font-weight:bold; text-align:center; } //--> </style> <script type="text/javascript"> <!-- function ins(){ var newTR; var newTD; newTR = TB.insertRow(TB.rows.length); newTD = newTR.insertCell(0); newTD.className="No"; newTD.innerHTML = ""+newTR.rowIndex; for(var i=1;i<4;i++){ newTD = newTR.insertCell(i); newTD.innerHTML = "<input type='text' name='retsu' value='' size='26' >"; } } function del(){ if(TB.rows.length>0) TB.deleteRow(TB.rows.length-1); } //--> </script> </head> <body> <table border=1> <col width="150"><col span="3"> <thead> <tr> <th class="No">No</th> <th>列1</th> <th>列2</th> <th>列3</th> </tr> </thead> <tbody id="TB"> <tr> <td class="No">1</td> <td><input type="text" name="retsu" value="" size="26" ></td> <td><input type="text" name="retsu" value="" size="26" ></td> <td><input type="text" name="retsu" value="" size="26" ></td> </tr> <tr> <td class="No">2</td> <td><input type="text" name="retsu" value="" size="26" ></td> <td><input type="text" name="retsu" value="" size="26" ></td> <td><input type="text" name="retsu" value="" size="26" ></td> </tr> </tbody> </table> <table> <tr> <td ><input type="button" VALUE="追加" onclick="ins()"></td > <td ><input type="button" VALUE="削除" onclick="del()"></td > </tr> </table> </body> </html>
その他の回答 (4)
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
#3>TB.deleteRow(TB.rows.count-1) は、 TB.deleteRow(TB.rows.length-1); の誤りでした。 あと、＃３の補足により修正してみました。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Shift_JIS"> <title>列追加、削除</title> <style> <!-- //--> </style> <script type="text/javascript"> <!-- function ins(){ var newTR; var newTD; newTR = TB.insertRow(); newTD = newTR.insertCell(); newTD.innerText = ""+TB.rows.length; for(var i=1;i<4;i++){ newTD = newTR.insertCell(); newTD.innerHTML = "<input type='text' name='retsu' value='' size='26' >"; } } function del(){ TB.deleteRow(TB.rows.length-1) } //--> </script> </head> <body> <table border=1> <col width="150" align="center" style="font-weight:bold"><col span="3"> <thead> <tr> <th >No</th> <th >列1</th> <th >列2</th> <th >列3</th> </tr> </thead> <tbody id="TB"> <tr> <td>1</td> <td><input type="text" name="retsu" value="" size="26" ></td> <td><input type="text" name="retsu" value="" size="26" ></td> <td><input type="text" name="retsu" value="" size="26" ></td> </tr> <tr> <td>2</td> <td><input type="text" name="retsu" value="" size="26" ></td> <td><input type="text" name="retsu" value="" size="26" ></td> <td><input type="text" name="retsu" value="" size="26" ></td> </tr> </tbody> </table> <table> <tr> <td ><input type="button" VALUE="追加" onclick="ins()"></td > <td ><input type="button" VALUE="削除" onclick="del()"></td > </tr> </table> </body> </html>
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Shift_JIS"> <title>列追加、削除</title> <style> <!-- //--> </style> <script type="text/javascript"> <!-- function ins(){ var newTR; var newTD; newTR = TB.insertRow(); for(var i=0;i<4;i++){ newTD = newTR.insertCell(); newTD.innerHTML = "<input type='text' name='retsu"+(i+1).toString()+"' value='' size='20' maxlength='10'>"; } } function del(){ TB.deleteRow(TB.rows.count-1) } //--> </script> </head> <body> <table border=1> <thead> <tr> <th>列1</th> <th>列2</th> <th>列3</th> <th>列4</th> </tr> </thead> <tbody id="TB"> <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> </tbody> </table> <table> <tr> <td ><input type="button" VALUE="追加" onclick="ins()"></td > <td ><input type="button" VALUE="削除" onclick="del()"></td > </tr> </table> </body> </html>
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
ＩＥ限定ということでよろしいのでしょうか あと、追加する行にtextボックスを作るということですよね。 その名前はどうするのでしょうか
補足
回答ありがとうございます。 IE限定です。 追加ボタンを押すと下にtextボックスが追加され 削除ボタンを押すと元に戻るという感じです。 名前は特に限定はないので何でもいいです。 回答待っています。よろしくお願いします。
- arakororin
- ベストアンサー率39% (80/205)
insertRowとかdeleteRowを使います。追加するときは、少しめんどくさく感じるかも
関連するQ&A
- 追加、削除について
以前、行の追加と削除で質問をした者です。 その時、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
- 追加ボタンでテーブルの行を追加する
情報登録する画面で既存テーブル（可変のテーブルにしたい）に 情報を追加するのに「追加ボタン」を押すと新規の行が追加されるように したいのですが、どのようにすればいいのでしょうか？ テストで以下のように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
- テーブルの行削除について
以前、テーブルの行追加について教えてもらい出来ましたが 逆に、追加された行を削除する方法を教えてください。 <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
- 列の削除について
削除したい列の削除ボタンを押した時に その列だけが削除するようにしたいのですが、 削除ボタンを押すとなぜか下から順番に列が削除されてしまいます。 自分でもどうしたら削除ボタンを押した列だけ削除できるのか いろいろとやってはみたのですがどうしてもわからず みなさんに相談してみることにしてみました。 どうかご教示の方よろしくお願いいたします。 <html> <head> <title>削除</title> <script type="text/JavaScript"> function del(){ if(TB.rows.length>0) TB.deleteRow(TB.rows.length-1); } --> </script> </head> <body> <TABLE BORDER> <tr> <td bgcolor=FFFF75>コード</td> <td bgcolor=FFFF75>商品</td> <td bgcolor=FFFF75>ジャンル</td> <td bgcolor=FFFF75>入荷日</td> <td bgcolor=FFFF75>登録日</td> </tr> <tbody id="TB"> <tr> <td><center><INPUT TYPE="text" size="10" value="" name="code"></center></td> <td><INPUT TYPE="text" size="40" value="" name="syohinNameRyaku"></td> <td><INPUT TYPE="text" size="" value="" name="syohinNameRyaku"> <td><center><INPUT TYPE="text" size="12" value="" name="tourokubi"><center></td> <td><INPUT TYPE="text" size="14" value="" name="tourokubi2"></td> <td><INPUT TYPE="button"value="削除" onclick="del()"></td> <tr> <td><center><INPUT TYPE="text" size="10" value="" name="code"></center></td> <td><INPUT TYPE="text" size="40" value="" name="syohinNameRyaku"></td> <td><INPUT TYPE="text" size="" value="" name="syohinNameRyaku"> <td><center><INPUT TYPE="text" size="12" value="" name="tourokubi"><center></td> <td><INPUT TYPE="text" size="14" value="" name="tourokubi2"></td> <td><INPUT TYPE="button"value="削除" onclick="del()"></td> <tr> <td><center><INPUT TYPE="text" size="10" value="" name="code"></center></td> <td><INPUT TYPE="text" size="40" value="" name="syohinNameRyaku"></td> <td><INPUT TYPE="text" size="" value="" name="syohinNameRyaku"> <td><center><INPUT TYPE="text" size="12" value="" name="tourokubi"><center></td> <td><INPUT TYPE="text" size="14" value="" name="tourokubi2"></td> <td><INPUT TYPE="button"value="削除" onclick="del()"></td> <tr> <td><center><INPUT TYPE="text" size="10" value="" name="code"></center></td> <td><INPUT TYPE="text" size="40" value="" name="syohinNameRyaku"></td> <td><INPUT TYPE="text" size="" value="" name="syohinNameRyaku"> <td><center><INPUT TYPE="text" size="12" value="" name="tourokubi"><center></td> <td><INPUT TYPE="text" size="14" value="" name="tourokubi2"></td> <td><INPUT TYPE="button"value="削除" onclick="del()"></td> </table> <br> </BODY> </HTML>
- ベストアンサー
- オープンソース開発
- formのtextフィールドが認識されない
下記のようなフォームに対し、JavaScriptで処理を行おうとしています。 <form name="dateForm" method="post" action=""> <table> <tr><td>0</td> <td><input type='text' name='date[]' maxlength='8' size=12 value='20111001'></td> <td><input type='text' name='date2[]' maxlength='8' size=12 value=''></td></tr> <tr><td>1</td> <td><input type='text' name='date[]' maxlength='8' size=12 value='20111002'></td> <td><input type='text' name='date2[]' maxlength='8' size=12 value=''></td></tr> <tr><td>2</td> <td><input type='text' name='date[]' maxlength='8' size=12 value='20111003'></td> <td><input type='text' name='date2[]' maxlength='8' size=12 value=''></td></tr> </table> <input type='text' name='date_0' maxlength='8' size=12 value='20111000'><br><br> <input type="submit" name="button" value="Check" onClick="send_self();"> <input type="submit" name="button" value="Enter" onClick="set_action();"> </form> Checkボタン押下で上記の関数を呼び出し、テキストフィールドdate[0]の値を表示すると、(1)では「20111001」と正しい値が表示されますが、(2)では下記のエラーが出てしまいます。 「プロパティ '0' の値を取得できません: オブジェクトは Null または未定義です。」 また、 alert(document.dateForm.elements[0]); // … (3) alert(document.dateForm.date); // … (4) とすると、(3)では[object]、(4)では[undefined]と表示されます。 alert(document.dateForm.date_0.value); はvalueも正しく表示されobjectとしても正しく認識されるので、配列へのアクセスに問題があるように思うのですが…。 問題点と解決法をご存知の方がいらっしゃいましたら、どうぞよろしくお願い致します。m(＿ ＿；)m
- ベストアンサー
- JavaScript
- selectでinputの表示を変えたい
セレクトを選択した時に、inputの一部をdisabledにし、同時にinputの背景色を変更したいと思っています。 ----------------------------------------------------------------------- 現在はこんな感じです。 function menuLink(linkLoc) { if(linkLoc !="") { ifrm.location.href=linkLoc;} } --- セレクト１ <SELECT style="WIDTH: 130px" onchange="menuLink(this.options[this.selectedIndex].value)"> <OPTION value="11.html">1</OPTION> <OPTION value="22.html">2</OPTION> <OPTION value="33.html">3</OPTION> セレクト２ <SELECT style="WIDTH: 130px" onchange="menuLink(this.options[this.selectedIndex].value)"> <OPTION value="44.html">1</OPTION> <OPTION value="55.html">2</OPTION> <OPTION value="66.html">3</OPTION> セレクト３ <SELECT style="WIDTH: 130px" onchange="menuLink(this.options[this.selectedIndex].value)"> <OPTION value="77.html">1</OPTION> <OPTION value="88.html">2</OPTION> <OPTION value="99.html">3</OPTION> (実際にはもっと多くのセレクトがあります) <TR> <TD><INPUT type="text" name="aa" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="ba" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="ca" size="10" maxlength="2"></TD></TR> <TR> <TD><INPUT type="text" name="ab" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="bb" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="cb" size="10" maxlength="2"></TD></TR> <TR> <TD><INPUT type="text" name="ac" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="bc" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="cc" size="10" maxlength="2" /></TD></TR> <TR> <TD><INPUT type="text" name=da readOnly value=0 size=10></TD> <TD><INPUT type="text" name=ea readOnly value=0 size=10></TD> <TD><INPUT type="text" name=fa readOnly value=0 size=10></TD></TR> <TR> <TD><INPUT type="text" name=db readOnly value=0 size=10></TD> <TD><INPUT type="text" name=eb readOnly value=0 size=10></TD> <TD><INPUT type="text" name=fb readOnly value=0 size=10></TD></TR> <TR> <TD><INPUT type="text" name=dc readOnly value=0 size=10></TD> <TD><INPUT type="text" name=ec readOnly value=0 size=10></TD> <TD><INPUT type="text" name=fc readOnly value=0 size=10></TD></TR> ----------------------------------------------------------------------- セレクト１のどれかを選択した時に、インプットのaa,ba,da,eaをdisabledにし、同時にaa,ba,da,eaの背景色を変更 セレクト２のどれかを選択した時に、インプットのab,bb,db,ebをdisabledにし、同時にab,bb,db,ebの背景色を変更 という感じにしたいのですが、可能でしょうか？ 可能であれば書き方を教えていただけると助かります。 よろしくおねがいします。
- 締切済み
- 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・・・が順番にそれぞれ入っています。
- ベストアンサー
- オフィス系ソフト
- 最後あたりに「/>」はなん役割がありのですか！？
http://okwave.jp/qa/q8312880.html 以上のURLをクリックすると、全プログラムがみれます。以下のプログラムは 以上プログラムを抜粋しました。 その、個々の構文の最後あたりに「/>」は、なんの役割があるのですか！？ たぶんHTMLだと思うのですが、教本が現在手元にないのでよく分かりません！？ よろしくお願いします。 <input type="button" id="exe" value=" 登録 "/> <input type="button" id="clr" value=" クリア "/> </th> </tr> <tr><th>代表者名:</th><td><input type="text" id="name" size="16"/></td></tr> <tr><th>所属組織:</th><td><input type="text" id="org" size="24"/></td></tr> <tr><th>連絡住所:</th><td><input type="text" id="addr" size="50"/></td></tr> <tr><th>電話番号:</th><td><input type="text" id="tel" size="16"/></td></tr> <tr><th>メルアド:</th><td><input type="text" id="mail" size="40"/></td></tr> <tr> <th>コース選択</th> <td id="selc"> <input type="radio" name="course" value="Aコースドリンク" />Aコース+ドリンク <input type="radio" name="coures" value"Aコースワイン" />Aコース+ ワイン<br/> <input type="radio" name="course" valus="Bコースリンク" />Bコース+ドリンク <input type="radio" name="course" value="Cコースワイン"/>Cコース+ワイン
- ベストアンサー
- HTML
- 動的な表の計算
いつもお世話になります。 見よう見まねでやっている初心者です。 下記のような動的な表があります（PHPで表の行が可変します。） name="aa"に入力された値とname="bb"に入力された値の足し算の 回答をname="kaito"に出したいと思っています。 計算ボタンを押すとname="kaito"に答えを出したいのですが、 以下のような式ですと当然ながら全く反応しません。 javascriptまたはPHPをどう記述すれば表の値を計算できるようになるのでしょうか？ できれば具体的に教えて頂ければ大変助かります。 ご教授の程よろしくお願い致します。 <script> function keisan(){document.tasizan.kaito.value=(document.tasizan.aa.value)+(document.tasizan.bb.value)} </script> <form name="tasizan"> <table width="100" border="1"> <tr> <th width="10" scope="col">a</th> <th width="10" scope="col">b</th> <th width="20" scope="col">回答</th> </tr> <tr> <td><INPUT type="text" name="aa" ></td><td><INPUT type="text" name="bb" ></td><td><INPUT type="text" name="kaito" ></td> <td><input type="button" value="計算" onclick="keisan()"/></td> </tr> <tr> <td><INPUT type="text" name="aa" ></td><td><INPUT type="text" name="bb" ></td><td><INPUT type="text" name="kaito" ></td> <td><input type="button" value="計算" onclick="keisan()"/></td> </tr> <tr> <td><INPUT type="text" name="aa" ></td><td><INPUT type="text" name="bb" ></td><td><INPUT type="text" name="kaito" ></td> <td><input type="button" value="計算" onclick="keisan()"/></td> </tr> <tr> <td><INPUT type="text" name="aa" ></td><td><INPUT type="text" name="bb" ></td><td><INPUT type="text" name="kaito" ></td> <td><input type="button" value="計算" onclick="keisan()"/></td> </tr> </table> </form>
- ベストアンサー
- JavaScript
補足
本当にありがとうございます。とても役にたちました。ただ、後になって気ずいたことがあったので再度、教えてもらいたいと思います。 追加ボタンを押すと左のNOが、3,4と下に増える削除ボタンを押すと戻るというやり方はできるのでしょうか？もしくは、NO1-NO3までの間のテキストボックスだけを下に追加、削除で出来るのでしょうか？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Shift_JIS"> <title>列追加、削除</title> <style> <!-- //--> </style> <script type="text/javascript"> <!-- function ins(){ var newTR; var newTD; newTR = TB.insertRow(); for(var i=0;i<4;i++){ newTD = newTR.insertCell(); newTD.innerHTML = "<input type='text' name='retsu"+(i+1).toString()+"' value='' size='26' maxlength='10'>"; } } function del(){ TB.deleteRow(TB.rows.count-1) } //--> </script> </head> <body> <table border=1> <thead> <col width="150"> <tr> <th rowspan="2">No</th> <th >列1</th> <th >列2</th> <th >列3</th> </tr> </thead> <tbody id="TB"> <tr> <th class="center">1</th> <td><input type="text" name="retsu" value="" size="26" value="" ></td> <td><input type="text" name="retsu" value="" size="26" value="" ></td> <td><input type="text" name="retsu" value="" size="26" value="" ></td> </tr> <tr> <th align="center">2</th> <td><input type="text" name="retsu" value="" size="26" value="" ></td> <td><input type="text" name="retsu" value="" size="26" value="" ></td> <td><input type="text" name="retsu" value="" size="26" value="" ></td> </tr> </tbody> </table> <table> <tr> <td ><input type="button" VALUE="追加" onclick="ins()"></td > <td ><input type="button" VALUE="削除" onclick="del()"></td > </tr> </table> </body> </html>