Javascript 单击jquery插入一行

我正在努力找出为什么我的代码不起作用。我有一个表格，一行有一个文本字段、两个复选框和一个添加按钮。我有4行在加载，我有一个超链接时，点击应该添加一个新行在表的末尾。我的代码是从第一行开始交替添加行。我的最后一行是我正在克隆的第4行。单击链接时获得的序列 1,4,2,4,3,4,4,4

我不明白我在哪里犯了错误，我已经为此绞尽脑汁4-5个小时了

<table id="setting">
<tr><td><input name="name_1" type="text" /></td>
<td><input type="checkbox" /> </td>
<td><input type="checkbox" /> </td>
<td><input type="button" /></td></tr>
<tr><td><input name="name_2" type="text" /></td>
<td><input type="checkbox" /> </td>
<td><input type="checkbox" /> </td>
<td><input type="button" /></td></tr>
<tr><td><input name="name_3" type="text" /></td>
<td><input type="checkbox" /> </td>
<td><input type="checkbox" /> </td>
<td><input type="button" /></td></tr>
<tr><td><input name="name_4" type="text" /></td>
<td><input type="checkbox" /> </td>
<td><input type="checkbox" /> </td>
<td><input type="button" /></td></tr>
</table>

$('#add').on("click", function(e) {
     e.preventDefault();
     e.stopPropagation();
     $clone = $('#settings tbody tr').filter(":last").clone(true).insertAfter('#settings tbody tr').filter(":last").val('');

$（“#设置tr:last child”）.insertAfter（“”）；

或

$（'#设置tr:last child'）。在（''）之后；

.after（）说明：在匹配元素集中的每个元素之后插入由参数指定的内容

看看这把小提琴：还有

$（“#添加”）。在（“单击”上，函数（e）{
e、 预防默认值（）；
e、 停止传播（）；
$（'#设置tr:last child'）。在（'td>'）之后；
返回false；
});

请看，标记中没有

tbody

，但您在jQuery中使用了：

<table id="setting">
   //<-----------------------missing tbody here
  <tr>
     <td><input name="name_1" type="text" /></td>
     .................

$('#<portlet:namespace />settings tbody tr:last')
      //--------------------------^^^^^------------its not there

选择了错误的id使用

设置

代替

设置

：

 $('#setting tr:last-child').clone().insertAfter('#setting tr:last');

另一更新：

$（'#添加'）。单击（函数（e）{
var$cln=$（“#设置tr:last child”）.clone（）；
$cln.find（':text'）.attr（'id'，'textbox'+$（'#设置tr:last child'）.index（））.val（''）；
$cln.find（':checkbox'）。每个（函数（i，v）{
$（this.attr（'id'，'check'+$（'#设置tr:last child'））.index（）+i.prop（'checked'，false）；
});
$cln.find（':button'）.attr（'id'，'btn'+$（'#设置tr:last child'）.index（））；
$cln.insertAfter（“#设置tr:last”）；
console.log（$cln.find（':text'）.attr（'id'）+'+$cln.find（':checkbox:eq（0））.attr（'id'）+'+$cln.find（':checkbox:eq（1））.attr（'id'））；
});

如果这是一个愚蠢的问题，很抱歉，但是什么是“”？

输出是什么？为了避免混淆，我删除了它，它将为该jsp输出一个唯一的id，可以从任何jsp页面访问该id。我尝试了

$（'#settings tr:last'）

，但它也不起作用。效果很好，我需要清除整行的数据，如果选中复选框，它们应该是清除的，输入文本字段也应该是清除的。还有，如何为文本框、复选框和button@Floradu88谢谢，伙计，我喜欢。你的代码只在下一行添加了一个按钮，按钮不在新行中。文本框、2个复选框和按钮组成一个行。我刚刚做了一个示例，它可以工作，但您不能使用它工作的代码来添加所需的代码。现在它已完成，当我到达计算机时，将更新JSFIDLE。选中添加单击代码。

$('#setting tr:last-child').after('<tr><td><input type="button" /></td></tr>');

$('#add').on("click", function (e) {
    e.preventDefault();
    e.stopPropagation();
    $('#setting tr:last-child').after('<tr><td><input name="name_4" type="text" /></td>td><input type="checkbox" /> </td><td><input type="checkbox" /> </td><td><input type="button" /></td></tr>');
    return false;
});

<table id="setting">
   //<-----------------------missing tbody here
  <tr>
     <td><input name="name_1" type="text" /></td>
     .................

$('#<portlet:namespace />settings tbody tr:last')
      //--------------------------^^^^^------------its not there

$('#<portlet:namespace />settings tr:last')

 $('#settings tbody tr')
 //---------^-----------------this makes the mess

 $('#setting tr:last-child').clone().insertAfter('#setting tr:last');

 $('#add').click(function (e) {
      var $cln = $('#setting tr:last-child').clone();
      $cln.find(':text').attr('id', 'textbox' + $('#setting tr:last-child').index()).val('');
      $cln.find(':checkbox').each(function (i, v) {
          $(this).attr('id', 'check' + $('#setting tr:last-child').index() + i).prop('checked', false);
      });
      $cln.find(':button').attr('id', 'btn' + $('#setting tr:last-child').index());
      $cln.insertAfter('#setting tr:last');
      console.log($cln.find(':text').attr('id') + '<===>' + $cln.find(':checkbox:eq(0)').attr('id') + '<===>' + $cln.find(':checkbox:eq(1)').attr('id'));
 });