jQuery에서 테이블 행을 추가하는 방법

  1. append()/prepend(): jQuery에서 테이블 행 추가
  2. JavaScript를 사용하여 테이블 행 추가

현재 HTML 테이블 요소에는 데이터 행을 포함하는tbody,thead,tfoot과 같은 다양한 내부 요소가 있습니다.

<table id="test">
   <tbody>
        <tr><td>Foo</td></tr>
    </tbody>
    <tfoot>
        <tr><td>footer information</td></tr>
    </tfoot>
</table>

DOM에 테이블 행을 삽입하는 동안 정확해야 할 필요가 있습니다. jQuery에는 요소를 추가하기위한 DOM 삽입 내부 및 외부의 두 가지 방법이 있습니다.

append()/prepend(): jQuery에서 테이블 행 추가

jQuery를 사용하여 테이블 본문에 행을 추가하려면 제안 된 요소의 시작 또는 끝에 요소를 추가하는 append()또는prepend()의 삽입 메소드 내에서 DOM을 사용할 수 있습니다. 여기서는 id = "test"table 요소의tbody 요소를 선택하여 그 뒤에 행을 추가합니다.

<script>
  $("#test>tbody").append("<tr><td>Test Row Append</td></tr>");
   //adding row to end and start
  $("#test>tbody").prepend("<tr><td>Test Row Prepend</td></tr>");</script>

다음 스크립트를 실행하면 새 HTML은 다음과 같습니다.

<table id="test">
   <tbody>
        <tr><td>Test Row Prepend</td></tr>
        <tr><td>Foo</td></tr>
        <tr><td>Test Row Append</td></tr>
    </tbody>
    <tfoot>
        <tr><td>footer information</td></tr>
    </tfoot>
</table>

jQuery에서 행을 추가하는이 방법은 appendto()prependto()메소드를 사용하여 수행 할 수 있습니다.

<script>
 $("<tr><td>Test Row Append</td></tr>").appendto("#test>tbody");
 $("<tr><td>Test Row Prepend</td></tr>").prependto("#test>tbody");
</script>

외부 DOM 삽입을 사용하여 jQuery에 테이블 행을 삽입하십시오

jQuery는.after().before()메소드와 함께 제공되어 각각 지정된 요소 앞뒤에 요소를 삽입합니다. 다양한 테이블 위치에 테이블 행을 추가하여 이러한 방법을 정확하게 사용할 수 있습니다.

<table>
 <tbody>
  <tr><td> Item First </td></tr>
  <tr><td> Item Last </td></tr>
 </tbody>
</table>

<script>
 $("table tbody:nth-child(1)").after("<tr><td> Item Second </td></tr>");
	//adding second item after 1st item
 $("table tbody:last-child").before("<tr><td> Item Just Before Last</td></tr>");
	//adding an item before last item
<script>

JavaScript를 사용하여 테이블 행 추가

또는 insertRow()함수를 사용하여 테이블에 행을 추가하는 네이티브 JavaScript 방식도 있습니다.

<table id="test">
  <tr>
    <td>row1 column1</td>
    <td>row1 column2</td>
  </tr>
</table>

<script>
function addrow(){
 var table = document.getElementById("test");
 var row = table.insertRow(0);
  //this adds row in 0 index i.e. first place
 row.innerHTML = "<td>row0 column1</td><td>row0 column2</td>";
}
</script>