Question

我想添加删除和添加按钮，其中的行字段悬停在this上。

但我的动态字段会在button click生成我可以为上面的链接设计做些哪些改变？这是我的代码：

<tr>         
     <td colspan=7 width=800><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>
     </td></tr>

这是我的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);

        //if (newNum == 5) $('#btnAdd').attr('disabled', 'disabled');
    });

        $('#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" />

Answer 1

嗯，问题很酷。 :) 这是解决方案。

HTML标记

<div class="formContainer">
    <div class="row">
        <div class="flt">
            <select name="items" id="items">
                <option value="1">1</option>
            </select>
        </div>
        <div class="flt"><textarea name="description" id="description"></textarea></div>
        <div class="flt"><input type="text" name="unitprice" id="unitprice" /></div>
        <div class="flt"><input type="text" name="quantity" id="quantity" /></div>
        <div class="flt">
            <select name="firsttax" id="firsttax">
                <option value="1">1</option>
            </select>
        </div>
        <div class="flt">
            <select name="secondtax" id="secondtax">
                <option value="1">1</option>
            </select>
        </div>
        <div class="flt"><input type="text" name="linetotal" id="linetotal" readonly /></div>
        <div class="flt"><input type="button" class="addRow" name="addRow" value="+" /></div>
        <div class="flt"><input type="button" class="removeRow" name="removeRow" value="-" /></div>
        <div class="clr"></div>
    </div>
</div>

CSS

.fieldRow {
        margin-bottom: 20px;
        overflow: hidden;
    }
    .fieldRow .field {
        float: left;
        margin: 0 10px 0 0;
    }
    .fieldRow select.field {
        padding: 1px;
    }
    .buttonHolder {
        border-top: solid 5px #ccc;
        padding: 10px;
    }
    #template .button.remove {
        display: none;  
    }

和JavaScript：

$(function(){
    var rowItem = $(".row");

    $(".formContainer").on("click", ".addRow", function(){
        var newItem = rowItem.clone(),
            rowIndex = $(".row").length;

        $(":input", newItem).each(function(c, obj){
            $(obj).attr("id", $(obj).attr("name") + rowIndex);
        });
        //$(this).parent().parent().after(newItem); // adds just after the current line
       $(".formContainer").append(newItem); // adds At the end of the container
    })
    .on("click", ".removeRow", function(){
        if($(".row").length > 1){
            $(this).parents(".row").remove();
        }
    });
});

您有两种方法可以添加该行：

如果想在当前行之后添加
如果要在表单末尾添加行

两者都在上面的JS中，（一个是现在评论的）

以下是工作演示：http://jsfiddle.net/ashishanexpert/8pJ4P/1/

如果您喜欢动画，可以查看以下内容： http://jsfiddle.net/ashishanexpert/8pJ4P/4/

Answer 2

这样的事情怎么样：

jQuery(document).on("ready", function() {

  initAddRows();

});

function initAddRows() {

  var template = jQuery("#template"),
      dataRows = jQuery("#dataRows");

  jQuery("#btnAdd").on("click", function() {

    var newRow = template.clone(true, true),
        fieldRows = dataRows.find(".fieldRow");

    newRow.attr('id', 'row' + (fieldRows.length + 1)).find('[id]').each(function() {

      jQuery(this).attr("id", jQuery(this).attr("id") + (fieldRows.length + 1));

    });

    fieldRows.filter(":last").after(newRow);

  });

  dataRows.on("click", ".remove", function() {

    jQuery(this).parent().remove();

  });
}

	.fieldRow {
	  margin-bottom: 20px;
	  overflow: hidden;
	}
	
	.fieldRow .field {
	  float: left;
	  margin: 0 10px 0 0;
	}
	
	.fieldRow select.field {
	  padding: 1px;
	}
	
	.buttonHolder {
	  border-top: solid 5px #ccc;
	  padding: 10px;
	}
	
	#template .button.remove {
	  display: none;
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dataRows">
  <div class="fieldRow" id="template">
    <select class="items field" name="items" id="items" disabled="disabled">
      <option value="1" selected="selected">Value</option>
      <option value="1"></option>
      <option value="1"></option>
    </select>

    <textarea name="description" id="description" class="description field"></textarea>

    <input type="text" name="unitprice" id="unitprice" class="unitprice field">

    <input type="text" name="quantity" id="quantity" class="quantity field">

    <select name="firsttax" id="firsttax" class="field">
      <option value="1" selected="selected">Value</option>
    </select>
    <select name="secondtax" id="secondtax" class="field">
      <option value="1" selected="selected">Value</option>
    </select>
    <input type="text" name="linetotal" id="linetotal" class="linetotal field" placeholder="0.00" readonly>

    <input type="button" class="button remove" id="btnDel" value="Remove Row" />
  </div>
</div>
<div class="buttonHolder">
  <input type="button" class="button add" id="btnAdd" value="Add Row" />
</div>

如何使用jquery添加删除和添加按钮的按钮？

2 个答案: