Как добавить дополнительную строку в таблицу, нажав

Question

Я пытаюсь создать систему счетов, и мне нужно добавить функцию для добавления дополнительных строк.

То, что у меня выглядит, выглядит так:

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

Что я хочу сделать, но понятия не имею, как это сделать: нажмите Добавить строку и добавьте дополнительную строку, чтобы добавить больше продуктов. Я провел некоторое исследование и наткнулся на какой-то пример, и я взял оттуда код для сценария, но я не знаю, оставил ли я часть сценария. Я использую html, php и js любая помощь будет принята с благодарностью! заранее благодарю.

Answer 1

Вам нужно использовать `` вместо '', если его несколько строк html. Также вам нужно использовать .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 m-r-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 m-r-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>