jquery가 테이블에 행을 추가합니다.

jQuery는 JavaScript 프로그래밍을 크게 단순화할 수 있는 효율적이고 간결한 JavaScript 라이브러리입니다. 웹 개발자의 경우 새 행을 추가하여 HTML 테이블(Table)을 확장해야 하는 경우가 많습니다. 그러면 jQuery를 통해 테이블에 행을 추가하는 방법은 무엇입니까? 다음으로 jQuery를 사용하여 테이블에 행을 추가하는 방법을 알아 보겠습니다.

1. HTML에서 테이블을 정의합니다

먼저 HTML 페이지에서 필요한 테이블을 정의합니다. 아래와 같이

<table id="myTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>职业</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>28</td>
      <td>工程师</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>32</td>
      <td>设计师</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>23</td>
      <td>市场营销</td>
    </tr>
  </tbody>
</table>

2. 새 행 추가

다음으로 jQuery에 새 행을 추가합니다. td 요소를 포함하는 tr 요소를 생성하여 새 행을 추가할 수 있습니다. 아래와 같이

$(document).ready(function(){
  $('#addRowBtn').click(function(){
    $('#myTable tbody').append('<tr><td>赵六</td><td>26</td><td>教师</td></tr>');
  });
});

여기에서는 jQuery 선택기를 사용하여 테이블의 tbody를 선택한 다음 추가 함수를 호출하여 tbody에 새 행을 추가합니다. 추가된 행은 각각 값을 포함하는 세 개의 셀을 포함하는 tr 요소입니다. jQuery를 사용하여 테이블에 행을 추가한 것을 볼 수 있습니다.

3. 루프를 통해 여러 행 추가

때로는 루프를 통해 테이블에 여러 행을 추가해야 할 때가 있습니다. JavaScript 루프를 사용하여 여러 행을 추가할 수 있습니다. 아래와 같이:

$(document).ready(function(){
  $('#addRowsBtn').click(function(){
    for(var i = 0; i < 10; i++){
      $('#myTable tbody').append('<tr><td>姓名' + i + '</td><td>年龄' + i + '</td><td>职业' + i + '</td></tr>');
    }
  });
});

여기서 for 루프를 사용하여 10번 반복하고, 매번 추가 기능을 통해 tbody에 행을 추가합니다. 문자열 연결을 사용하여 각 셀의 값을 정의하고 변수 i를 사용하여 각 셀의 값을 고유하게 만들 수 있습니다.

4. 지정된 위치에 행 삽입

때로는 테이블의 특정 위치에 새 행을 추가해야 할 때가 있습니다. 이때 새로운 행이 삽입될 구체적인 위치를 지정해야 합니다. 아래와 같이

$(document).ready(function(){
  $('#addAtBtn').click(function(){
    var newRow = '<tr><td>张七</td><td>22</td><td>运动员</td></tr>';
    var targetRow = $('#myTable tbody tr:eq(2)');
    if(targetRow.length > 0){
      targetRow.before(newRow);
    }
  });
});

여기서 새 행 newRow를 정의하고 선택기를 통해 테이블의 두 번째 행 targetRow를 선택합니다.

그런 다음 before 함수를 사용하여 targetRow 앞에 새 행을 추가합니다.

targetRow가 존재하지 않으면 새 행이 삽입되지 않습니다. 두 번째 행 뒤에 행을 추가하려면 before 함수 대신 after 함수를 사용하면 됩니다.

요약

위는 jQuery를 사용하여 테이블에 행을 추가하는 세 가지 방법입니다. 추가 기능을 통해 새 행을 추가하거나, 루프를 통해 여러 행을 추가하거나, 특정 위치에 새 행을 삽입할 수 있습니다. jQuery를 사용하면 HTML 테이블을 빠르고 쉽게 확장하고 웹사이트를 더욱 강력하고 완벽하게 만들 수 있습니다.

위 내용은 jquery가 테이블에 행을 추가합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!