使用jquery在表中添加和删除行

编辑：

好到目前为止，我已经实现了删除行的目标之一……但是现在我无法在删除当前行之后重新创建上一行中的删除按钮..代码看起来像这样

HTML：

  
 <form id="survey_form" method="post" action=""> 
 
 
1
 
 
 
 
    
  

和JQuery：

 $(document).ready(function(){ var x = 2; $("#add_q").click(function(){ if (x <= 10){ $("#survey_table").append("" + ""+x+"" + "" + "" + ""); $("#del"+x).click(function(){ $(this).parent().parent().remove(); x--; $("#td"+x).append(""); }); $("#del"+(x-1)).remove(); x++; } }); }); 

它看起来像是来自JQuery的这一行

 $("#td"+x).append(""); 

不做他应该做的工作..语法对我来说很好，但我可能是错的。 那么也许任何人都可以查看问题所在并帮助我解决问题？ 提前致谢

Answer 1

这是你想要的吗？ 小提琴

  $('#container').on('click', '.survey_del', function() { var row = $(this).closest('tr'); if (x >= 2) { x--; } var previous = $(row).prev('tr'); $(previous).find('td.row-3').html(""); $(row).remove(); }); 

并将del按钮类重命名为survey_del 。

Answer 2

我想你想要的是：

  $(document).ready(function(){ var x = 1; $("#add_q").click(function(){ if (x <= 10){ $("#survey_table").append("" + " "+x+"" + "" + "" + ""); $("#del"+x).on('click', function(){console.log($(this)); $(this).parent().parent().remove()}); x++; } }); }); 

小提琴： http ： //jsfiddle.net/z38t3n65/

Answer 3

为避免多个parent()调用，您甚至可以使用parents() 。

 $("#del" + x ).click(function() { $(this).parents("tr").remove() }); 

我做了一个测试的jsfiddle。

http://jsfiddle.net/u8gfrazu/