テーブルに新しい行を追加する

Question

私は2つの入力フィールドを持っています。

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


}); 

結果は最初の列でOKです。そして、次回追加ボタンをクリックすると、新しい行が移動しているように見えます。

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（）メソッドを使用します。 例Eq（2）..これは最後のノードに移動します。

その後、あなたは何が必要HTML追加することができます。..ここ

は、ソリューション..です

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