javascript - 在点击jquery时插入一行

Question

我正在努力弄清楚为什么我的代码不起作用。我有一个包含文本字段、2 个复选框和一个连续添加按钮的表格。我有 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('');

我从 stackoverflow 中的一个问题中尝试了下面的这段代码。这个对我不起作用，我不知道为什么

$('#settings tbody tr:last').clone(true).insertAfter('#settings tbody>tr:last');
$('#settings tbody tr:last').val('');

Answer 1

看到你在标记中没有 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

你可以试试这个:

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

---

更新:

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

选择了错误的 id 使用 setting 而不是 settings:

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

CHECKOUT THIS FIDDLE

另一个更新:

 $('#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'));
 });