加 <tr> 表格中的元素

Question

我想当我点击+添加更多按钮时，它应该添加与第1行相同的元素以及S.No应该增加...并且每行都有remove选项。

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

您可以使用.clone（）复制您的第一个tr ：

 $(".text-right").on("click", function() { var tr = $("table tr:eq(1)").clone(true); $(tr).find("td:first").text($("table tr").length - 1); $("table").append(tr); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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 type="text" class="form-control"> </td> <td style="width:80%"> <input type="number" class="form-control"> </td> <tr> </tbody> </table> 

我从输入中删除了id ，因为id必须是唯一的。 还要修改一点代码以增加正确的td数值。

Answer 2

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

实际观看

Answer 3

尝试：html：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <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 type="text" class="form-control">
          </td>
          <td style="width:80%">
            <input type="number" class="form-control"/></br><a class="rm" href="#">remove</a>
          </td>
          </tr>
      </tbody>

    </table>

JS：

function updateNumber() {
   x = 0
        $('table.table tbody tr').each(function(i,v){

            $(this).find('td:eq(0)').text(x+1)
            x++;
        });
}
    $("#c").on('click',function(e){
        e.preventDefault();
        var tr = $("table.table tbody tr:first").clone().appendTo("table.table tbody");
        updateNumber();
        console.log($('table.table tbody tr'));
    });
    $('body').on("click",".rm", function(e) {
        e.preventDefault();
       $(this).parents('tr').remove();
        updateNumber();
     });

jsfiddle： https ://jsfiddle.net/pjeruccb/3/

Answer 4

看看这个：

 $(".text-right").on("click", function() { var prevNo = parseInt($(".table tr:last td:first-child").text()); var tr = $("table tr:eq(1)").clone(true); $("table").append(tr); $('.table tr:last-child td:first-child').html(prevNo + 1); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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 type="text" class="form-control"> </td> <td style="width:80%"> <input type="number" class="form-control"> </td> </tr> </tbody> </table>