Как добавить кнопку удаления и добавить строки с помощью jquery?

Question

Я хочу добавить удалить и добавить кнопки с полями на строке hover, как 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

Как о чем-то вроде этого:

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

 
    }); 
 
}

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

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

Answer 2

Ну, проблема в этом. :) Вот решение.

HTML Markup

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

У вас есть два способа добавления т он грести:

1. Если хотите добавить сразу после текущей строки
2. Если хотите добавить строку в конец формы

И есть в приведенном выше JS, (один отметил, как сейчас)

Вот рабочий пример: http://jsfiddle.net/ashishanexpert/8pJ4P/1/

Если вы любите анимацию, вы можете проверить это одно:http://jsfiddle.net/ashishanexpert/8pJ4P/4/