ベストアンサー

追加、削除のやり方を教えてください。

2005/11/23 21:50

追加ボタンを押すと下に列が増えていき削除ボタンを押すと上に削除するやり方を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）
専門家の回答

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

ベストアンサー

BLUEPIXY
ベストアンサー率50% (3003/5914)

2005/11/25 04:34 回答No.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>  </style> <script type="text/javascript">  </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)

2005/11/25 03:49 回答No.4

#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">  </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)

2005/11/24 15:11 回答No.3

<!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">  </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>

質問者

補足 2005/11/25 02:42

本当にありがとうございます。とても役にたちました。ただ、後になって気ずいたことがあったので再度、教えてもらいたいと思います。追加ボタンを押すと左の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">  </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>

ログインすると、全ての回答が全文表示されます。