添加動態sr.no到表格行

Question

我想添加動態sr.nos到動態添加行。我已經完成動態行添加功能，但我卡在動態添加sr.no 請幫我解決這個問題。還建議我如果有任何更新需要在我的行中添加代碼。

我的代碼如下

$(document).ready(function() { 
 

 
      $('.del').live('click', function() { 
 
       $(this).parent().parent().remove(); 
 
      }); 
 

 
      $('.add').live('click', function() { 
 
       $(this).val('Delete'); 
 
       $(this).attr('class', 'del'); 
 
       var appendTxt = "<tr> <td>1</td> <td> <select id='additems' name='additems' class='form-control' required='required'> <option selected>-- Select --</option> <option><a href='' id='addnewpo'>Add new</a></option> <option value='1'> Abc </option> <option value='2'> IT services </option> <option value='3'> JS Enterprises</option> </select> </td> <td><input type='text' class='form-control'></td> <td><input type='text' class='form-control'></td> <td><input type='text' class='form-control'></td> <td><input type='text' class='form-control'></td> <td><input type='text' class='form-control' disabled></td> <td> <select id='tax' name='tax' class='form-control' required='required'> <option selected>-- Select --</option> <option>NA</option> <option value='0'> 0 </option> <option value='3'> 3% </option> <option value='5'>5%</option> <option value='12'>12%</option> <option value='18'>18%</option> <option value='28'>28%</option> </select> </td> <td width='2%'><input type='button' class='add' value='Add More' /> </td> </tr>"; 
 
       $("tr:last").after(appendTxt); 
 
      }); 
 
     });

<table id="potable" class="table table-bordered table-striped dt-responsive nowrap" width="100%"> 
 
     <thead> 
 
      <tr> 
 
       <th width="5%">Sr.no</th> 
 
       <th width="20%">Items</th> 
 
       <th>Description</th> 
 
       <th>Price</th> 
 
       <th>Qty</th> 
 
       <th>Unit</th> 
 
       <th>Amount</th> 
 
       <th>Tax</th> 
 
       <th></th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 

 
      <tr> 
 
       <td>1</td> 
 
       <td> 
 
        <select id="additems" name="additems" class="form-control" required="required">             
 
        <option selected>-- Select --</option> 
 
        <option><a href="" id="addnewpo">Add new</a></option> 
 
        <option value="1"> Abc </option> 
 
        <option value="2"> IT services </option> 
 
        <option value="3"> JS Enterprises</option> 
 
       </select> 
 
       </td> 
 
       <td><input type="text" class="form-control"></td> 
 
       <td><input type="text" class="form-control"></td> 
 
       <td><input type="text" class="form-control"></td> 
 
       <td><input type="text" class="form-control"></td> 
 
       <td><input type="text" class="form-control" disabled></td> 
 
       <td> 
 
        <select id="tax" name="tax" class="form-control" required="required">             
 
        <option selected>-- Select --</option> 
 
        <option>NA</option> 
 
        <option value="0"> 0 </option> 
 
        <option value="3"> 3% </option> 
 
        <option value="5">5%</option> 
 
        <option value="12">12%</option> 
 
        <option value="18">18%</option> 
 
        <option value="28">28%</option> 
 
       </select> 
 
       </td> 
 
       <td width="2%"> 
 
        <input type='button' class='add' value='Add More' /> </td> 
 
      </tr> 
 
     </tbody> 
 
    </table>

Answer 1

我想下面的代碼可以幫助你，不要忘記添加jQuery的JS。

var NoOfRows = document.getElementById('potable').rows.length - 1; 
 
var RowId = NoOfRows + 1; 
 
var appendTxt = "<tr id="+RowId+"> <td>"+RowId+"</td> <td> <select id='additems' name='additems' class='form-control' required='required'> <option selected>-- Select --</option> <option><a href='' id='addnewpo'>Add new</a></option> <option value='1'> Abc </option> <option value='2'> IT services </option> <option value='3'> JS Enterprises</option> </select> </td> <td><input type='text' class='form-control'></td> <td><input type='text' class='form-control'></td> <td><input type='text' class='form-control'></td> <td><input type='text' class='form-control'></td> <td><input type='text' class='form-control' disabled></td> <td> <select id='tax' name='tax' class='form-control' required='required'> <option selected>-- Select --</option> <option>NA</option> <option value='0'> 0 </option> <option value='3'> 3% </option> <option value='5'>5%</option> <option value='12'>12%</option> <option value='18'>18%</option> <option value='28'>28%</option> </select> </td> <td width='2%'><input type='button' class='add' value='Add More' /> </td> </tr>";     
 
$('#potable > tbody:last-child').append(appendTxt);