做一個 table 可給使者用隨時增加列, 刪除列- 藍色小舖 BlueShop

台灣最大程式設計社群網站

∣免費加入會員∣登入 ∣回首頁∣ 您好

線上人數
1125

會員總數：246277
討論主題：189813

登入

登出

歡迎您免費加入會員

討論區選單

開發工具

行動裝置開發

資料庫

多媒體 / 網管

綜合

文章區

討論區列表 >> PHP >> 做一個 table 可給使者用隨時增加列, 刪除列

[]

[我要回覆]

做一個 table 可給使者用隨時增加列, 刪除列
價值 : 20 QP 點閱數:3526 回應數:5

樓主

AMD支持者

56	37
150	52

發送站內信

不同使用者有不同需要, 有的要輸入3項, 有的要輸入30項, 我想做一個 table 可給使者用隨時增加列, 刪除列類似execl,請指教!

本篇文章發表於2011-05-21 23:28

1樓回應曼菲士	$(function(){ var jq_tr = $('table tr:last').clone(); $('table tr').find('td button').bind('click', function(){ $(this.parentNode.parentNode).remove(); resetNum(); }); $('#add').bind('click', function(){ var jq_tr_new = jq_tr.clone().appendTo('table tbody'); jq_tr_new.find('td button').bind('click', function(){ $(this.parentNode.parentNode).remove(); resetNum(); }); resetNum(); }); function resetNum() { $('table tr').each(function(i){ $(this).find('td:first').text(i+1); }); } }); <button id="add">新增</button> <table border="1"> <tbody> <tr> <td>1</td> <td><input name="inp[]" /></td> <td><button>刪除</button></td> </tr> </tbody> </table> 本篇文章回覆於2011-05-22 17:28 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
2樓作者回應 AMD支持者	請問以下的放在那呢? 是JAVASCRIPT嗎? 貼上去行不到呀! $(function(){ 2 var jq_tr = $('table tr:last').clone(); 3 $('table tr').find('td button').bind('click', function(){ 4 $(this.parentNode.parentNode).remove(); 5 resetNum(); 6 }); 7 $('#add').bind('click', function(){ 8 var jq_tr_new = jq_tr.clone().appendTo('table tbody'); 9 jq_tr_new.find('td button').bind('click', function(){ 10 $(this.parentNode.parentNode).remove(); 11 resetNum(); 12 }); 13 resetNum(); 14 }); 15 function resetNum() 16 { 17 $('table tr').each(function(i){ 18 $(this).find('td:first').text(i+1); 19 }); 20 } 21 }); 22 本篇文章回覆於2011-05-22 21:14 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
3樓回應曼菲士	一"一a... 行號都貼上去了呀本篇文章回覆於2011-05-22 22:33 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
4樓作者回應 AMD支持者	已去除行號呀! 本篇文章回覆於2011-05-22 22:35 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
5樓最有價值解答曼菲士	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文件</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script> $(function(){ var jq_tr = $('table tr:last').clone(); $('table tr').find('td button').bind('click', function(){ $(this.parentNode.parentNode).remove(); resetNum(); }); $('#add').bind('click', function(){ var jq_tr_new = jq_tr.clone().appendTo('table tbody'); jq_tr_new.find('td button').bind('click', function(){ $(this.parentNode.parentNode).remove(); resetNum(); }); resetNum(); }); function resetNum() { $('table tr').each(function(i){ $(this).find('td:first').text(i+1); }); } }); </script> </head> <body> <button id="add">新增</button> <form> <table border="1"> <tbody> <tr> <td>1</td> <td><input name="inp[]" /></td> <td><button>刪除</button></td> </tr> </tbody> </table> <input type="submit" /> </form> </body> </html> 本篇文章回覆於2011-05-22 22:40 == 簽名檔 == --未登入的會員無法查看對方簽名檔--

回覆

如要回應,請先登入.

1樓回應曼菲士	$(function(){ var jq_tr = $('table tr:last').clone(); $('table tr').find('td button').bind('click', function(){ $(this.parentNode.parentNode).remove(); resetNum(); }); $('#add').bind('click', function(){ var jq_tr_new = jq_tr.clone().appendTo('table tbody'); jq_tr_new.find('td button').bind('click', function(){ $(this.parentNode.parentNode).remove(); resetNum(); }); resetNum(); }); function resetNum() { $('table tr').each(function(i){ $(this).find('td:first').text(i+1); }); } }); <button id="add">新增</button> <table border="1"> <tbody> <tr> <td>1</td> <td><input name="inp[]" /></td> <td><button>刪除</button></td> </tr> </tbody> </table> 本篇文章回覆於2011-05-22 17:28 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
2樓作者回應 AMD支持者	請問以下的放在那呢? 是JAVASCRIPT嗎? 貼上去行不到呀! $(function(){ 2 var jq_tr = $('table tr:last').clone(); 3 $('table tr').find('td button').bind('click', function(){ 4 $(this.parentNode.parentNode).remove(); 5 resetNum(); 6 }); 7 $('#add').bind('click', function(){ 8 var jq_tr_new = jq_tr.clone().appendTo('table tbody'); 9 jq_tr_new.find('td button').bind('click', function(){ 10 $(this.parentNode.parentNode).remove(); 11 resetNum(); 12 }); 13 resetNum(); 14 }); 15 function resetNum() 16 { 17 $('table tr').each(function(i){ 18 $(this).find('td:first').text(i+1); 19 }); 20 } 21 }); 22 本篇文章回覆於2011-05-22 21:14 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
3樓回應曼菲士	一"一a... 行號都貼上去了呀本篇文章回覆於2011-05-22 22:33 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
4樓作者回應 AMD支持者	已去除行號呀! 本篇文章回覆於2011-05-22 22:35 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
5樓最有價值解答曼菲士	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文件</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script> $(function(){ var jq_tr = $('table tr:last').clone(); $('table tr').find('td button').bind('click', function(){ $(this.parentNode.parentNode).remove(); resetNum(); }); $('#add').bind('click', function(){ var jq_tr_new = jq_tr.clone().appendTo('table tbody'); jq_tr_new.find('td button').bind('click', function(){ $(this.parentNode.parentNode).remove(); resetNum(); }); resetNum(); }); function resetNum() { $('table tr').each(function(i){ $(this).find('td:first').text(i+1); }); } }); </script> </head> <body> <button id="add">新增</button> <form> <table border="1"> <tbody> <tr> <td>1</td> <td><input name="inp[]" /></td> <td><button>刪除</button></td> </tr> </tbody> </table> <input type="submit" /> </form> </body> </html> 本篇文章回覆於2011-05-22 22:40 == 簽名檔 == --未登入的會員無法查看對方簽名檔--