Question

我的要求如下：

我在第一列中有默认行和下拉列表，一旦我从下拉列表中选择一个选项，就应该添加一个表行，其内容与主行和＆amp;相同。应该为添加的行添加删除按钮。添加1行后，第1行不会显示删除按钮，只有第1行可见的删除按钮。请帮我解决这个问题。提前谢谢。

我的代码如下

＆＃13;

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

＆＃13;

Answer 1

您可以使用解决方案https://jsfiddle.net/60fxtfen/1/

＆＃13;

$(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);
  }
});

＆＃13;

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

＆＃13;

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

在下拉列表中选择＆amp;添加表格行删除行。只有一次从特定下拉列表中添加行

1 个答案: