javascript - 在下拉列表中添加表行选择并删除行。仅从特定下拉列表选择中添加行一次

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>

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