Jquery在当前行后删除当前行并删除当前行

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代码：

1. 我只能通过点击最后添加行按钮添加行，我希望能够在我点击“添加行”之后添加一行。

2. 当我点击“删除行”时没有任何反应。

感谢您的帮助

Answer 1

当您注册一个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中的不同选择器。

---

工作例如：

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

<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>

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

// 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(); 
}); 

像乙脑病毒在回答处理器提及除非您注册它们，否则不会添加新对象在文件本身。

Answer 2

它正常工作，您必须在删除功能的错字。你的类名是remline

它应该是这样的

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