在表中添加<tr>元素

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

您可以使用.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); 
    }); 
}) 

See it in action

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>