从发票页面添加/删除行 [英] add / remove row from invoice page

问题描述

你好，我是一个jquery noob，我正在制作一个发票页面，并在发票上添加了一个新行，但是当我单击删除按钮时，它将删除第一个行项目而不是最后一个。有没有办法在添加（克隆）第一行时能够重命名行ID，并且能够按照最新的行删除行？继承人我的代码

 < div class =container> 
< div class =rowid =addrow> 
< div class =col-md-2> 
< input type =textplaceholder =Item＃1class =form-control/> 
< / div> 
< div class =col-md-6> 
< input type =textplaceholder =Descriptionclass =form-control/> 
< / div> 
< div class =col-md-1> 
< input type =textplaceholder =Qty。 class =form-control/> 
< / div> 
< div class =col-md-1> 
< input type =textplaceholder =Taxclass =form-control/> 
< / div> 
< div class =col-md-2> 
< input type =textplaceholder =Item Totalclass =form-control/> 
< / div> 
< / div> 
< input type ='button'id ='add'value ='Add item'class =btn btn-success/> 
< script> 
 $（'＃add'）。click（function（）{
 var n = $（'＃addrow'）。length + 1; 
 var temp = $（'＃addrow：首先'）。clone（）; 
 $（'input：first'，temp）.attr（'placeholder'，'Item＃'+ n）
 $（'＃addrow：last'）。 after（temp）; 
}）; 
< / script> 
 
 
< button type =buttonclass =btn btn-primaryid =remove>移除< / button> 
< script> 
 $（document）.ready（function（）{
 $（＃remove）。click（function（）{
 $（＃addrow）。remove（）; 
}）; 
}）; 
 
< / script> 
  

解决方案

使用常见参数，例如如果可能的话，可以使用类或 data-attrbiutes 。常见的ID无效。

检查此代码，

  $（ '#add'）。click（function（）{
 var n = $（'。row'）。length + 1; 
 var temp = $（'。row：first'）。clone ）; 
 
 temp.attr（'id'，temp.attr（'id'）+ n）; //避免重复的ID 
 
 $（'input：first' ，temp）.attr（'placeholder'，'Item＃'+ n）
 $（'。row：last'）。after（temp）; 
}）; 
 
 $（document）.ready（function（）{
 $（＃remove）。click（function（）{
 $（。row：last） .remove（）; //删除节
}）; 
}）; 
  

Demo

Hello all I am a jquery noob, I am making a invoice page and got the add a new line to the invoice to work however when I click the remove button it will remove the first line item instead of the last. Is there a way to rename the row id when I add(clone) the first line and be able to delete the rows by the latest ones first?? heres my code

<div class="container">
<div class="row" id="addrow">
<div class="col-md-2">
<input type="text" placeholder="Item #1" class="form-control" />
</div>
<div class="col-md-6">
<input type="text" placeholder="Description" class="form-control" />
</div>
<div class="col-md-1">
<input type="text" placeholder="Qty." class="form-control" />
</div>
<div class="col-md-1">
<input type="text" placeholder="Tax" class="form-control" />
</div>
<div class="col-md-2">
<input type="text" placeholder="Item Total" class="form-control" />
</div>
</div>
<input type='button' id='add' value='Add item' class="btn btn-success"/>
<script>
$('#add').click(function () {
var n = $('#addrow').length + 1;
var temp = $('#addrow:first').clone();
$('input:first', temp).attr('placeholder', 'Item #' + n)
$('#addrow:last').after(temp);
});
</script>


<button type="button" class="btn btn-primary" id="remove">Remove</button>
<script>
$(document).ready(function(){
$("#remove").click(function(){
$("#addrow").remove();
});
});

</script>

解决方案

Use a common parameter like class or data-attrbiutes wherever possible. Common Ids are invalid.

Check this code,

$('#add').click(function () {
    var n = $('.row').length + 1;
    var temp = $('.row:first').clone();

    temp.attr('id', temp.attr('id') + n);       //avoiding duplicate ID

    $('input:first', temp).attr('placeholder', 'Item #' + n)
    $('.row:last').after(temp);
});

$(document).ready(function () {
    $("#remove").click(function () {
        $(".row:last").remove();               //Remove section.
    });
});

Demo

这篇关于从发票页面添加/删除行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！