테이블에 새 행 추가

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 속성을 공유 요소를 삽입 권하고 싶지 않다. 이 대체 방법을 고려해보십시오.

Answer 3

HTML 테이블의 마지막 색인을 사용하면됩니다. 예를 들어, 테이블에 3 행이 있다면 Jquery의 eq() 메소드를 사용하십시오. 예 : Eq (2) .. 마지막 노드로 이동합니다.

그럼 당신은 .. 여기

는 솔루션입니다 .. 당신이 필요로하는 어떤 HTML 추가 할 수 있습니다

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