1

我正在努力弄清楚为什么我的代码不起作用。我有一个表格，其中包含一个文本字段、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('');
4

2 回答 2

2

看到你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

选择了错误的 idsetting来代替settings：

 $('#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'));
 });
于 2013-03-21T05:55:28.990 回答
1 
$('#setting tr:last-child').insertAfter('<tr><td><input type="button" /></td></tr>');

或者 

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

.after() 描述：在匹配元素集中的每个元素之后插入由参数指定的内容。

检查这个小提琴：jsfiddle和更新的小提琴

$('#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;
});
于 2013-03-21T05:49:03.643 回答