javascript - 在表格中添加 元素

Question

我希望当我单击“+添加更多”按钮时，它应该添加与第 1 行中相同的元素，并且 S.No 应该递增......并且每行都有删除选项。

code in JSFIDDLE

<a href="" id="c" class="text-right">+add more</a>

<table class="table">
    <thead>
        <tr>
            <th>S.No.</th>
            <th>Name</th>
            <th>Dose</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td style="width:80%">
                <input id="1a" type="text" class="form-control">
            </td>
            <td style="width:80%">
                <input type="number" class="form-control">
            </td>
        <tr>
    </tbody>
</table>

Answer 1

Jquery clone()用于克隆 DOM 元素，然后您可以附加它。考虑这样的代码:

$(function(){
    $("#c").click(function(e){
        e.preventDefault();
        $("table.table tbody tr:first").clone().appendTo("table.table tbody");
    });
})

DEMO

<小时/>

对于序列号的增量:

$(function(){
    var counter = 1;
    $("#c").click(function(e){
        e.preventDefault();
        var tr = $("table.table tbody tr:first").clone().appendTo("table.table tbody");
        tr.find("td:eq(0)").text(++counter);
    });
}) 

See it in action