Adding a new <select> to a table row using Jquery, JavaScript

Question

This is the image

I am new to this web designing, and I would like to put a button which can put a new row on the table. It works, but when tried adding a <select> tag in as well, but I don't know enough knowledge to do so. It seems that type='select' is absolutely wrong. So how can i put a <select> tag to the new row instead of just text?

 <script> $(document).ready(function() { var i = 1; $("#add_row").click(function() { $('tr').find('input').prop('disabled',true); $('#nmr' + i).html("<td>" + (i + 1) + "</td><td><input type='select' name='shiftid" + i + "'class='form-control input-md'/></td><td><input type='select' name='breakid" + i + "</td><td><input type='number' name='naturasa" + i + "'class='form-control input-md'/></td><td><input type='number' name='naturapu" + i + "'class='form-control input-md'/></td><td><input type='number' name='makannorm" + i + "'class='form-control input-md'/></td><td><input type='number' name='ttal" + i + "'class='form-control input-md'/></td>"); $('#tab_logic').append('<tr id="nmr' + (i + 1) + '"></tr>'); i++; }); }); 

 <div id="datatable" class="container"> <h2>Data Input</h2> <table class="table table-condensed" id="tab_logic"> <thead> <tr> <th>#</th> <th>Shift</th> <th>Jam Istirahat</th> <th>Natura Sakit</th> <th>Natura Puasa</th> <th>Makan Normal</th> <th>Total</th> </tr> </thead> <tbody> <tr id="nmr0"> <td> 1 </td> <td> <select name="shiftid" class="form-control"> <option selected disabled="disabled" value="">-Select An Option-</option> <option value="NormalShift">Normal Shift</option> <option value="Long Shift">Long Shift</option> </select> </td> <td> <select name="breakid" class="form-control"> <option selected disabled="disabled" value="">-Select An Option-</option> <option value="break1">11.45-12.15</option> <option value="break2">20.30-21.00</option> <option value="break3">18.00-18.45</option> <option value="break4">00.00-00.30</option> <option value="break5">07.00-07.30</option> </select> </td> <td> <input id="nomore" type="number" min="0" name="naturasa" class="form-control"> </td> <td> <input id="nomore" type="number" min="0" name="naturapu" class="form-control"> </td> <td> <input id="nomore" type="number" min="0" name="makannorm" class="form-control"> </td> <td> <input id="nomore" type="number" min="0" name="ttal" class="form-control"> </td> </tr> <tr id='nmr1'></tr> </tbody> </table><p></p> <input type="submit" id="add_row" class="btn btn-primary btn-lg pull-left" value="Add Order"> <input type="submit" id="removedata" value="Remove Order"> </div> 

Answer 1

you can use jquery clone to copy the first table row and then append it to bottom of the table.

you can find last row of the table by using

 var $lastTr = $('.classoftable tr').eq(1);

and then clone this last row of the table by using

 var $clone = $lastTr.clone();

and now append this cloned row to your table by using

 $clone.appendTo('.classoftable');

you can also highlight newly added row by using

 $clone.effect("highlight", {
            color: "#3c8dbc"
        }, 2000);

for reference use this jsfiddle

Answer 2

• First of all #id must be unique, there are no exceptions to this rule. The four <input> all have the same <input id= " nomore "... > . They have been reassigned as id="A0" , id="B0" , id="C0" , id="D0" .

• Replaced .html(... with a plain JavaScript method: insertAdjacentHTML() which does the same thing as .html() except it inserts instead of overwriting.

• Removed unnecessary empty <tr>

• Moved i++ which increments before the row is added

• Used Template Literals for the string which makes the process a lot easier (note you don't have to add a ton of + at every newline)

• Note $('tbody')[0] the bracket notation dereferences the jQuery Object to use a plain JavaScript method on it (ie insertAdjacentHTML() )

• The correct HTML for a <select> is added as well as the proper interpolation of the incremented i variable

Demo

 $(document).ready(function() { var i = 0; $("#add_row").click(function() { i++; $('tbody')[0].insertAdjacentHTML('beforeend', ` <tr id="nmr${i}"> <td>${i+1}</td> <td> <select name="shiftid" class="form-control"> <option selected disabled value=""> -Select An Option- </option> <option value="Normal Shift">Normal Shift </option> <option value="Long Shift"> Long Shift </option> </select> </td> <td> <select name="breakid" class="form-control"> <option selected disabled value=""> -Select An Option- </option> <option value="break1"> 11.45-12.15 </option> <option value="break2"> 20.30-21.00 </option> <option value="break3"> 18.00-18.45 </option> <option value="break4"> 00.00-00.30 </option> <option value="break5"> 07.00-07.30 </option> </select> </td> <td> <input id="A${i}" type="number" min="0" name="naturasa" class="form-control"> </td> <td> <input id="B${i}" type="number" min="0" name="naturapu" class="form-control"> </td> <td> <input id="C${i}" type="number" min="0" name="makannorm" class="form-control"> </td> <td> <input id="D${i}" type="number" min="0" name="ttal" class="form-control"> </td> </tr>`); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="datatable" class="container"> <h2>Data Input</h2> <table class="table table-condensed" id="tab_logic"> <thead> <tr> <th>#</th> <th>Shift</th> <th>Jam Istirahat</th> <th>Natura Sakit</th> <th>Natura Puasa</th> <th>Makan Normal</th> <th>Total</th> </tr> </thead> <tbody> <tr id="nmr0"> <td> 1 </td> <td> <select name="shiftid" class="form-control"> <option selected disabled value="">-Select An Option-</option> <option value="Normal Shift">Normal Shift</option> <option value="Long Shift">Long Shift</option> </select> </td> <td> <select name="breakid" class="form-control"> <option selected disabled value="">-Select An Option-</option> <option value="break1">11.45-12.15</option> <option value="break2">20.30-21.00</option> <option value="break3">18.00-18.45</option> <option value="break4">00.00-00.30</option> <option value="break5">07.00-07.30</option> </select> </td> <td> <input id="A0" type="number" min="0" name="naturasa" class="form-control"> </td> <td> <input id="B0" type="number" min="0" name="naturapu" class="form-control"> </td> <td> <input id="C0" type="number" min="0" name="makannorm" class="form-control"> </td> <td> <input id="D0" type="number" min="0" name="ttal" class="form-control"> </td> </tr> </tbody> </table> <p></p> <input type="submit" id="add_row" class="btn btn-primary btn-lg pull-left" value="Add Order"> <input type="submit" id="removedata" value="Remove Order"> </div>