實現目標:點擊按鈕複製本行,修改後重新插入到本行後面,點擊複製出的行可刪除本行 代碼如下: ...
實現目標:點擊按鈕複製本行,修改後重新插入到本行後面,點擊複製出的行可刪除本行
代碼如下:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>行自加自減</title> 6 </head> 7 <body> 8 <div class="outer"> 9 <div> 10 <div style="display: inline-block;"> 11 <a onclick="add(this);"><button>+</button></a> 12 </div> 13 <div style="display: inline-block;"> 14 <input type="checkbox"> 15 <input type="text"> 16 </div> 17 </div> 18 </div> 19 20 <script src="jquery-1.8.2.js"></script> 21 <script> 22 function add(self) { 23 var item = $(self).parent().parent().clone(); 24 item.find('button').text('-'); 25 item.appendTo('.outer'); 26 item.find('a').attr('onclick','removee(this);'); 27 //$('.outer').append(item) 28 } 29 function removee(ths) { 30 $(ths).parent().parent().remove(); 31 } 32 </script> 33 </body> 34 </html>