[問題] 表格刪除列的問題

看板Ajax作者KAPP (時間が....)時間16年前 (2008/02/27 18:08)推噓2(2推 0噓 4→)

留言6則, 3人參與討論串1/1

先稍微說明一下我的頁面一開始只有一個textfield和insert button 下方則是有個表格今天當使用者在textfield自由輸入後可以在下方的表格中新增一列使用者所輸入的值並且在一旁有一個刪除的鈕讓使用者可以刪除這一列但我目前遇到的問題是每次刪除時都只能刪除最後一列我猜測問題應該是出在javascript的部份可是卻找不到真正有問題的部份以下附上原始碼: 這是test1.html <html> <head> <script language="javascript"> function insert_click() { var form1 = document.getElementById("form1"); form1.submit(); } function del_click(e) { var row=e.parentElement.parentElement; var myTable = document.getElementById("myTable"); for(var i = 1 ; i < myTable.rows.length ; i++) { if(row.rowIndex==i) { myTable.deleteRow(i); } } } </script> </head> <body> <form id="form1" name="form1" method="post" action="test2.html" target="debug"> <input type=text size="10" name="input" id="input"></input> <input type="button" name="insert" value="insert" onclick="insert_click()" ></input> </form> <table id="myTable" width="100" border="3" cellspacing="2" cellpadding="2"> <thead> <tr> <td>Num</td> <td>Del</td> </tr> </thead> <tbody id="grow"> </tbody> </table> <iframe name="debug" style="width:100%; height:250px; display:none;" > </iframe> </body> </html> 這是test2.html <html> <head> <script language="JavaScript"> function getGrow() { var input = parent.window.document.getElementById("input"); var td1 = document.getElementById("td1"); td1.value = input.value; var grow = parent.window.document.getElementById("grow"); var growing = document.getElementById("growing"); grow.insertAdjacentElement('beforeEnd', growing); td1.parentElement.id="row"+input.value; } </script> </head> <body onLoad="getGrow()"> <table width="100" border="3" cellspacing="2" cellpadding="2"> <tbody id="growing"> <tr id="row"> <td><input type="text" name="td1" id="td1" ></td> <td><input type="button" name="del" id="del" value="刪除" onClick="del_click(this);"></td> </tr> </tbody> </table> </body> </html> 程式新手　敬請給予指教謝謝 -- -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 140.115.126.164 ※ 編輯: KAPP 來自: 140.115.126.164 (02/27 18:09) ※ KAPP:轉錄至看板 Web_Design 02/27 18:12