在表中追加新行

Question

我有兩個輸入字段。

<label>First Name:</label><input type="name" class="form-control" id="fname"> 
<label>Last Name:</label><input type="name" class="form-control" id="lname"> 
<button class="btn btn-primary" id="add">Add</button> 

我想將值添加到表中。隨着每次我點擊添加按鈕，我需要在新行中插入值：

<table class="table bordered" id="table"> 
    <thead><tr><td>S.N.</td><td>First Name</td><td>Last Name</td></tr></thead> 
     <tbody id="tbody"> 
      <tr id="tr"> 
       <td></td> 
       <td> 
        <div id="showf"></div> 
       </td> 
       <td> 
        <div id="showl"></div> 
       </td> 
      </tr> 
     </tbody> 
</table> 

這就是我所做的。 Jquery：

$(document).on('click', '#add', function (e) 
{ 
    e.preventDefault(); 
    var fname=$('#fname').val(); 
    var lname=$('#lname').val(); 

    $('#tbody').append($('#tr').html()); 
    $('#showf').append(fname); 
    $('#showl').append(lname); 


}); 

結果對於第一列是可以的。然後我點擊添加按鈕，新行似乎被移動

Answer 1

你應該追加整個tr。

這應該是你的HTML：

<table class="table bordered" id="table"> 
    <thead><tr><td>S.N.</td><td>First Name</td><td>Last Name</td></tr></thead> 
     <tbody id="tbody"> 

     </tbody> 
</table> 

而且你的jQuery的應該是：

$(document).on('click', '#add', function (e) 
{ 
    e.preventDefault(); 
    var fname=$('#fname').val(); 
    var lname=$('#lname').val(); 

    $('#tbody').append('<tr><td>' + fname + '</td><td>' + lname + '</td></tr>'); 
}); 

Answer 2

關於你的代碼，我不建議將共享相同的id屬性的元素。考慮這種替代方法：

function addNameToTable($table, firstName, lastName) { 
    var newRow = '<tr>'; 
    newRow += '<td></td>'; 
    newRow += '<td><div class="showf">' + firstName + '</div></td>'; 
    newRow += '<td><div class="showl">' + lastName + '</div></td>'; 
    newRow += '</tr>'; 
    $table.find('tbody').append(newRow); 
} 

$(document).on('click', '#add', function(e) { 
    e.preventDefault(); 
    var $table = $('#table'); 
    var firstName = $('#fname').val(); 
    var lastName = $('#lname').val(); 
    addNameToTable($table, firstName, lastName); 
}); 

Answer 3

你可以做的是拿走你的HTML表格的最後一個索引。 例如，如果你在表中有3行，那麼使用Jquery的eq（）方法。例如，公式（2）..這將帶你到最後一個節點。

然後你就可以添加你需要的任何HTML ..

下面是解...

$('#your_table > tbody > tr').eq(i-1).after(html);