在下拉选择和删除行上添加表格行。仅从特定下拉选择中添加行一次

Question

我的要求如下：

我有一个默认行的表格，第一列有下拉菜单，一旦我从下拉菜单中选择一个选项，应该添加 1 个表格行，其内容与主行相同，并且应该为添加的行添加删除按钮。添加 1 行后，第 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>

我已经创建了基线，你需要让我知道在哪里添加删除和编辑选项。