在下拉菜單中添加表格行，選擇並刪除行。 僅從特定下拉列表添加行一次

Question

我的要求如下：

我在第一列中有帶默認行的表，一旦從下拉列表中選擇了一個選項，就應該添加1個表行，其內容與主行相同，並應為該行添加刪除按鈕。 一旦添加1行，刪除按鈕在第一行就不可見，然后僅在第一行可見。 請幫助我。 提前致謝。

我的代碼如下

 <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>Dell 500 series</td> <td>55,333</td> <td>10</td> <td>NA</td> <td>5,53,330</td> <td>8%</td> <td width="2%"><a class="actions-btn" id="delete-row" title="Delete"><span class="icon ico-delete ico-2x"></span></a></td> </tr> </tbody> </table> 

Answer 1

在這里，您可以使用解決方案https://jsfiddle.net/60fxtfen/1/

 $(document).on('change', 'select[name="additems"]', function(){ if($('#additems option:selected').text() === "Add new"){ $('table tbody').append($('table tbody tr:first-child').clone()); $('table tbody tr:last-child td:first-child').text($('table tbody tr').length); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <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>Add new</option> <option value="1"> Abc </option> <option value="2"> IT services </option> <option value="3"> JS Enterprises</option> </select> </td> <td>Dell 500 series</td> <td>55,333</td> <td>10</td> <td>NA</td> <td>5,53,330</td> <td>8%</td> <td width="2%"><a class="actions-btn" id="delete-row" title="Delete"><span class="icon ico-delete ico-2x"></span></a></td> </tr> </tbody> </table> 

我已經創建了基准，您需要讓我知道在哪里添加刪除和編輯選項。