如何为每个动态行添加添加和删除按钮?

时间:2013-10-10 06:58:44

标签: javascript jquery symfony

我创建了一个动态表单,但是当我点击添加行时,它会在最后添加行,当我单击删除按钮时,它会删除我要添加的最后一行(2个按钮用于添加,1个用于删除,每行用于我单击添加行,它在整行下面添加行,如果我单击删除行,则删除整行而不是最后一行).i想要进行如下设计: enter image description here

这是我的动态字段代码:

<div id="input1" style="margin-bottom:4px;" class="clonedInput">
     <select class="items" name="items" style="width:127px; float:left;" id="items"><option value="1" selected="selected" disabled="disabled"></option></select>
     <textarea name="description" id="description" class="description" style="float:left; display: block; height: 30px; width:209px; border-radius:0px; margin: -1px 1px 0;"></textarea>
     <input type="text" name="unitprice" id="unitprice" class="unitprice" style="float:left; display: block; height: 30px; width:106px; border-radius:0px; margin: -1px -1px 0;">
     <input type="text" name="quantity" id="quantity" class="quantity" style="float:left; display: block; height: 30px; width:64px; border-radius:0px; margin: -1px 1px 0;">
     <select name="firsttax" id="firsttax" style=" float:left; display: block; height: 31px; width:106px; border-radius:0px; margin: -2px -1px 0;"><option value="1" selected="selected" ></option></select>
     <select name="secondtax" id="secondtax" style="float:left; display: block; height: 31px; width:107px; border-radius:0px; margin: -2px 0px 0;"><option value="1" selected="selected"></option></select>
     <input type="text" name="linetotal" id="linetotal" class="linetotal" placeholder="0.00" readonly style="float:right; display: block; height: 31px; width:107px; border-radius:0px; background-color: #F0F0F0; text-align:right; margin: -31px -1px 0;">         
</div>
<input type="hidden" id="itemscounter" name="itemscounter" value=""/>

以下是生成动态字段的javascript代码:

$('#btnDel').attr('disabled','disabled');
       $('#btnAdd').click(function () {
        var num = $('.clonedInput').length;
        var newNum = num + 1;

    var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);
        newElem.find(':input').each(function () {
            $('form select[name=items]').attr('name', 'items'+newNum);
            $('form select[id=items]').attr('id', 'items'+newNum);

    $('form textarea[name=description]').attr('name', 'description'+newNum);
    $('form textarea[id=description]').attr('id', 'description'+newNum);    
    $('form input[name=unitprice]').attr('name', 'unitprice'+newNum);
    $('form input[id=unitprice]').attr('id', 'unitprice'+newNum);

    $('form input[name=quantity]').attr('name', 'quantity'+newNum);
    $('form input[id=quantity]').attr('id', 'quantity'+newNum);

    $('form select[name=firsttax]').attr('name', 'firsttax'+newNum);
    $('form select[id=firsttax]').attr('id', 'firsttax'+newNum);

    $('form select[name=secondtax]').attr('name', 'secondtax'+newNum);
    $('form select[id=secondtax]').attr('id', 'secondtax'+newNum);

    $('form input[name=linetotal]').attr('name', 'linetotal'+newNum);
    $('form input[id=linetotal]').attr('id', 'linetotal'+newNum);
    $('#itemscounter').val(+newNum);
    });

    $('#input' + num).after(newElem);
    $('#btnDel').attr('disabled', false);

    });

    $('#btnDel').click(function() {
        var num = $('.clonedInput').length;

        $('#input' + num).remove();
        $('#btnAdd').attr('disabled',false);
        if (num-1 === 1)
            $('#btnDel').attr('disabled','disabled');
   });

   $('#btnDel').attr('disabled','disabled');

这是按钮:

    <input type="button" class="btn btn-success" id="btnAdd" value="Add Row" />
    <input type="button" class="btn btn-danger" id="btnDel" value="Remove Row" />

这是我的截图:

enter image description here

在我的代码中更改以使上面的图片像删除行并在每行中添加行?

1 个答案:

答案 0 :(得分:1)

这是解决方案,

 $(document).ready(function() {

       $('#btnAdd').click(function () {
        var cloned = $('#table').find('tr:eq(1)').clone()
        cloned.removeClass('.row');
        $('#table').append(cloned);
    });

        $('#btnDel').click(function() {
            $('#table').find('tr:last').remove();
        });

 });

<强> JSFIDDLE DEMO