Databases
StackOverflow2013
Postsdbo
POhow to add remove and add button with lines using jquery?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POhow to add remove and add button with lines using jquery?
    text
    copied!<p>i want to add remove and add buttons with the fields on row hover like <a href="https://edgelogics.freshbooks.com/menu.php?route=createInvoice" rel="nofollow">this</a>. </p> <p>but my dynamic fields generate on <code>button click</code> which changes i can do for above link design? here is my code:</p> <pre><code>&lt;tr&gt; &lt;td colspan=7 width=800&gt;&lt;div id="input1" style="margin-bottom:4px;" class="clonedInput"&gt;&lt;select class="items" name="items" style="width:127px; float:left;" id="items"&gt;&lt;option value="1" selected="selected" disabled="disabled"&gt;&lt;/option&gt;&lt;/select&gt; &lt;textarea name="description" id="description" class="description" style="float:left; display: block; height: 30px; width:209px; border-radius:0px; margin: -1px 1px 0;"&gt;&lt;/textarea&gt; &lt;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;"&gt; &lt;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;"&gt; &lt;select name="firsttax" id="firsttax" style=" float:left; display: block; height: 31px; width:106px; border-radius:0px; margin: -2px -1px 0;"&gt;&lt;option value="1" selected="selected" &gt;&lt;/option&gt;&lt;/select&gt; &lt;select name="secondtax" id="secondtax" style="float:left; display: block; height: 31px; width:107px; border-radius:0px; margin: -2px 0px 0;"&gt;&lt;option value="1" selected="selected"&gt;&lt;/option&gt;&lt;/select&gt; &lt;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;"&gt; &lt;/div&gt; &lt;/td&gt;&lt;/tr&gt; </code></pre> <p>and here is my <code>javascript</code> code to generate dynamically fields:</p> <pre><code> $('#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'); </code></pre> <p>and here is my buttons:</p> <pre><code>&lt;input type="button" class="btn btn-success" id="btnAdd" value="Add Row" /&gt; &lt;input type="button" class="btn btn-danger" id="btnDel" value="Remove Row" /&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload