Question

我对jquery很新，我很难理解如何使这项工作。

$('.addline').click(function () {
    var $tr = $(this).closest('tr');
    var allTrs = $tr.closest('table').find('tr');
    var lastTr = allTrs[allTrs.length-1];
    var $clone = $(lastTr).clone();

    $clone.find('td').each(function() {
        var el = $(this).find(':first-child');
        var id = el.attr('id') || null;
        if(id) {
            var i = id.substr(id.length-1);
            var prefix = id.substr(0, (id.length-1));
            el.attr('id', prefix+(+i+1));
            el.attr('name', prefix+(+i+1));
        }
    });

    $clone.find('input:text').val('');
    $tr.closest('table').append($clone);
});

// Remove row from the table
$('.Remline').click(function () {
    $(this).closest('tr').remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="fla_inf" width="100%">
<tr>
<th class="tab_header" colspan="6">Flavors and Additives</th>
</tr>
<tr>
    <th class="tab_header_nam">Flavor Brand</th>
    <th class="tab_header_nam">Flavor Name</th>
    <th class="tab_header_nam">Dropper Type</th>
    <th class="tab_header_nam">Quantity</th>
    <th class="tab_header_nam">Total %</th>
    <th class="tab_header_nam">Add/Remove row</th>
</tr>
<tbody>
<tr>
     <td><select id="marque.0" name="marque,0"></select></td>
     <td><select id="arome.0" name="arome.0"></select></td>
     <td><select id="dropper.0" name="dropper.0"></select></td>
     <td><input id="quantity.0" name="quantity.0" type="number"/></td>
     <td><input id="fla_perc.0" name="fla_perc.0" type="number" min="0" max="100"/></td>
     <td><input class="addline" type="button" value="Add row" /><input class="remline" type="button" value="Remove row" /></td>
</tr>
</tbody>
</table>

我的JS代码有两个问题：

我只能通过点击最后一个添加行按钮添加一行，我希望能够在我点击“添加行”之后添加一行。
点击“删除行”后没有任何反应。

感谢您的帮助

Answer 1

你可以在删除功能中输入错误。您的班级名称为remline

应该是这样的

// Remove row from the table
    $('.remline').click(function () {
        $(this).closest('tr').remove();
    });

Answer 2

当您在DOM元素上注册事件时，jQuery仅向当前存在于页面上的元素添加句柄，因此如果在注册事件后添加新的DOM元素，则该新元素将不具有任何句柄。一个简单的解决方案是在document上注册事件。

这可以按预期工作：

$(document).on('click', '.addline', function () {
    // code for adding line
});

$(document).on('click', '.remline', function () {
    // code for removing line
});

另外，正如@vbouk已经提到的，你的选择器中有一个拼写错误。 Remline和remline是CSS中的不同选择器。

工作示例：

＆＃13;

$(document).on('click', '.addline', function() {
  var $tr = $(this).closest('tr');
  var allTrs = $tr.closest('table').find('tr');
  var lastTr = allTrs[allTrs.length - 1];
  var $clone = $(lastTr).clone();

  $clone.find('td').each(function() {
    var el = $(this).find(':first-child');
    var id = el.attr('id') || null;
    if (id) {
      var i = id.substr(id.length - 1);
      var prefix = id.substr(0, (id.length - 1));
      el.attr('id', prefix + (+i + 1));
      el.attr('name', prefix + (+i + 1));
    }
  });

  $clone.find('input:text').val('');
  $tr.closest('table').append($clone);
});

// Remove row from the table
$(document).on('click', '.remline', function() {
  $(this).closest('tr').remove();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table id="fla_inf" width="100%">
  <tr>
    <th class="tab_header" colspan="6">Flavors and Additives</th>
  </tr>
  <tr>
    <th class="tab_header_nam">Flavor Brand</th>
    <th class="tab_header_nam">Flavor Name</th>
    <th class="tab_header_nam">Dropper Type</th>
    <th class="tab_header_nam">Quantity</th>
    <th class="tab_header_nam">Total %</th>
    <th class="tab_header_nam">Add/Remove row</th>
  </tr>
  <tbody>
    <tr>
      <td>
        <select id="marque.0" name="marque,0"></select>
      </td>
      <td>
        <select id="arome.0" name="arome.0"></select>
      </td>
      <td>
        <select id="dropper.0" name="dropper.0"></select>
      </td>
      <td>
        <input id="quantity.0" name="quantity.0" type="number" />
      </td>
      <td>
        <input id="fla_perc.0" name="fla_perc.0" type="number" min="0" max="100" />
      </td>
      <td>
        <input class="addline" type="button" value="Add row" />
        <input class="remline" type="button" value="Remove row" />
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

感谢您提供答案，正确的代码是：

 // Add row to the table by cloning existing row
 $(document).on('click', '.addline', function(){

    var $tr = $(this).closest('tr');
    var allTrs = $tr.closest('table').find('tr');
    var lastTr = allTrs[allTrs.length-1];
    var $clone = $(lastTr).clone();
    $clone.find('td').each(function(){
        var el = $(this).find(':first-child');
        var id = el.attr('id') || null;
        if(id) {
            var i = id.substr(id.length-1);
            var prefix = id.substr(0, (id.length-1));
            el.attr('id', prefix+(+i+1));
            el.attr('name', prefix+(+i+1));
        }
    });
    $clone.find('input:text').val('');
    $tr.closest('table').append($clone);
});

// Remove row from the table
$(document).on('click', '.remline', function() {
    $(this).closest('tr').remove();
});

就像在答案中提到的Jev一样，除非您在文档中注册新对象，否则不会添加新对象。

Jquery在当前行之后添加行并删除当前行

2 个答案: