How to add extra row on a table by clicking

Question

I am trying to create an invoice system and I need to add a function to add extra rows.

What I have looks like this:

 $(document).ready(function() { $("#addrow").click(function(){ $(".item-row:last").after(' <tr class="item-row"> <td>#</td> <td>New Item</td> <td>New</td> <td>New</td> <td>New</td> <td>New</td> <td>New</td> </tr>'); bind(); }); });

 <table> <tr> <th>#</th> <th>Type</th> <th>Location</th> <th>Item</th> <th>Cost</th> <th>Days</th> <th>Price</th> </tr> <tr class="item-row"> <td>1</td> <td>Type</td> <td>Location</td> <td>Item</td> <td>100</td> <td>2</td> <td>200</td> </tr> <tr id="hidden-row"> <td colspan=7> <a id="addrow" href="javascript:;" title="Add a row">Add a row</a> </td> </tr>

What I want to do but have no idea how to do it is: click Add a row, and have an extra row to add more products. I did some research and came across some example and I took the code for the script from there but I do not know if I left part of the script out. I am using, html, php and js any help will be greatly appreciated! thank you in advanced.

Answer 1

You need to use `` instead of '' if its multiple line html. Also, you need to use .bind():

 $(document).ready(function() { $("#addrow").click(function() { $(".item-row:last").after(` <tr class="item-row"> <td>#</td> <td>New</td> <td>New</td> <td>New</td> <td>New</td> <td>New</td> <td>New</td> </tr>`) .bind(); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <th>#</th> <th>Type</th> <th>Location</th> <th>Item</th> <th>Cost</th> <th>Days</th> <th>Price</th> </tr> <tr class="item-row"> <td>1</td> <td>Type</td> <td>Location</td> <td>Item</td> <td>100</td> <td>2</td> <td>200</td> </tr> <tr id="hidden-row"> <td colspan=7> <a id="addrow" href="javascript:;" title="Add a row">Add a row</a> </td> </tr> </table>

Answer 2

 $(document).ready(function() { var iCnt=0; $('#FaqsTable').on('click','#addCF',function() { if(iCnt<=100) { iCnt=iCnt+1; $("#FaqsTable").append('<tr>'+ //'<td> <div class=" col-md-9"><div class="gt_privacy_field default_width"> <input type="text" class="c_ph" id="POID" name="POID[]" value="" placeholder="POID" /></div></div></td>' + '<td style="display:none"><input type="text" class="c_ph" id="BillDetailID" name="BillDetailID[]" value="0" placeholder="Select Item" style="width:150px" /></td>'+ '<td><input type="text" class="form-control" id="Perticulars" name="Perticulars[]" value="" placeholder="Enter Perticular" style="width:400px"/></td>'+ '<td><input type="text" class="form-control" id="Amount" name="Amount[]" value="0" placeholder="Enter Amount" style="width:150px"/></td>'+ '<td class="hidden" style="display:none"><input type="text" class="Flag sm-form-control" id="Flag" name="Flag[]" value="I" placeholder="Flag" /></td>'+ '<td><a href="javascript:void(0);" id="remCF"><p class="fa fa-trash-o mr-5" style="color:red"></p>Remove</a></td> '+ '</tr>'); } }); $("#FaqsTable").on('click','#remCF',function() { var flag=$(this).closest('tr').find(".Flag").val(); if(flag=="I") { $(this).closest('tr').remove(); } else(flag=="U") { $(this).closest("tr").hide(); $(this).closest('tr').find(".Flag").val("D"); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div class="form-group row"> <div class="table-responsive"> <table id="FaqsTable" class="table table-bordered nobottommargin"> <tr style="background-color:#b5aeae"> <th style="text-align:center;width:400px;">Perticular </th> <th style="text-align: center; width: 150px;">Amount </th> <th style="text-align: center; width: 100px;">Action</th> <tr /> <tr> <td style="display:none"> <input type="text" class="form-control" id="BillDetailID" name="BillDetailID[]" value="0" placeholder="ItemName" style="width:150px" required /> </td> <td> <input type="text" class="form-control" id="Perticulars" name="Perticulars[]" value="" placeholder="Enter Perticular" style="width:400px" required /> </td> <td> <input type="text" class="form-control" id="Amount" name="Amount[]" value="0" placeholder="EnterAmount" style="width:150px" required /> </td> <td> <a href="javascript:void(0);" id="addCF"><p class="fa fa-plus" style="color:green"></p>Add</a> </td> </tr> </table> </div> </div>

 $(document).ready(function() { var iCnt=0; $('#FaqsTable').on('click','#addCF',function() { if(iCnt<=100) { iCnt=iCnt+1; $("#FaqsTable").append('<tr>'+ //'<td> <div class=" col-md-9"><div class="gt_privacy_field default_width"> <input type="text" class="c_ph" id="POID" name="POID[]" value="" placeholder="POID" /></div></div></td>' + '<td style="display:none"><input type="text" class="c_ph" id="BillDetailID" name="BillDetailID[]" value="0" placeholder="Select Item" style="width:150px" /></td>'+ '<td><input type="text" class="form-control" id="Perticulars" name="Perticulars[]" value="" placeholder="Enter Perticular" style="width:400px"/></td>'+ '<td><input type="text" class="form-control" id="Amount" name="Amount[]" value="0" placeholder="Enter Amount" style="width:150px"/></td>'+ '<td class="hidden" style="display:none"><input type="text" class="Flag sm-form-control" id="Flag" name="Flag[]" value="I" placeholder="Flag" /></td>'+ '<td><a href="javascript:void(0);" id="remCF"><p class="fa fa-trash-o mr-5" style="color:red"></p>Remove</a></td> '+ '</tr>'); } }); $("#FaqsTable").on('click','#remCF',function() { var flag=$(this).closest('tr').find(".Flag").val(); if(flag=="I") { $(this).closest('tr').remove(); } else(flag=="U") { $(this).closest("tr").hide(); $(this).closest('tr').find(".Flag").val("D"); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div class="form-group row"> <div class="table-responsive"> <table id="FaqsTable" class="table table-bordered nobottommargin"> <tr style="background-color:#b5aeae"> <th style="text-align:center;width:400px;">Perticular </th> <th style="text-align: center; width: 150px;">Amount </th> <th style="text-align: center; width: 100px;">Action</th> <tr /> <tr> <td style="display:none"> <input type="text" class="form-control" id="BillDetailID" name="BillDetailID[]" value="0" placeholder="ItemName" style="width:150px" required /> </td> <td> <input type="text" class="form-control" id="Perticulars" name="Perticulars[]" value="" placeholder="Enter Perticular" style="width:400px" required /> </td> <td> <input type="text" class="form-control" id="Amount" name="Amount[]" value="0" placeholder="EnterAmount" style="width:150px" required /> </td> <td> <a href="javascript:void(0);" id="addCF"><p style="color:green"></p>Add</a> </td> </tr> </table> </div> </div>