프런트 엔드 개발에서 일반적으로 사용되는 JavaScript 라이브러리인 jQuery는 DOM 작업에 있어 강력한 실용성과 편의성을 갖추고 있습니다. 그 중 HTML 요소를 동적으로 추가하는 것은 jQuery의 일반적인 작업 중 하나입니다. 특히 테이블을 조작할 때 요소를 동적으로 추가하는 것은 필수입니다.

jQuery에는 요소를 추가하는 방법이 많이 있습니다. 아래에서는 참고할 수 있는 몇 가지 일반적인 방법을 소개합니다.

1.append() 메소드를 사용하세요.

append() 메소드는 지정된 HTML 코드나 요소를 기존 요소의 끝에 추가할 수 있습니다. 따라서 Append() 메소드를 사용하여

에 요소를 추가할 수 있습니다. 샘플 코드는 다음과 같습니다.

$(document).ready(function(){
   $("button").click(function(){
      $("table").append("<tr><td>新行的单元格 1</td><td>新行的单元格 2</td></tr>");
   });
});

로그인 후 복사

샘플 코드에서 버튼을 클릭하면 새로운

2. eq() 메서드를 사용하여 동적으로 행을 추가합니다.

eq() 메서드는 일치하는 요소 컬렉션에서 지정된 인덱스 위치에 있는 요소를 선택할 수 있습니다. 따라서 먼저 지정된

요소를 가져온 다음 eq() 메서드를 사용하여 이를 복사하고 테이블에 삽입할 수 있습니다.

$(document).ready(function(){
   $("button").click(function(){
      var $cloneRow=$("table tr").eq(0).clone();
      $("table").append($cloneRow);
   });
});

로그인 후 복사

샘플 코드에 테이블의 첫 번째 요소

요소가 복사되어 테이블에 삽입됩니다.

3. after() 메소드를 사용하여 행을 추가하세요.

after() 메소드는 지정된 HTML 코드나 요소를 지정된 요소 뒤에 삽입할 수 있습니다. 따라서 테이블의 지정된 위치에 새

요소를 삽입할 수 있습니다. 샘플 코드는 다음과 같습니다.

$(document).ready(function(){
   $("button").click(function(){
      var $newRow=$("<tr><td>单元格1</td><td>单元格2</td></tr>");
      $("table tr:eq(0)").after($newRow);
   });
});

로그인 후 복사

샘플 코드에서는 새

요소를 테이블의 첫 번째 < ;tr> 요소 뒤에 있는 테이블입니다.

4. 행을 추가하려면appendTo() 메소드를 사용하세요.

appendTo() 메소드는 지정된 요소를 다른 지정된 요소의 내부 끝 위치에 삽입할 수 있습니다. 따라서 먼저 새로운

요소를 생성하여 문서에 삽입한 다음, AppendTo() 메서드를 사용하여 테이블에 삽입할 수 있습니다.

$(document).ready(function(){
   $("button").click(function(){
      var $newRow=$("<tr><td>单元格1</td><td>单元格2</td></tr>").appendTo("table");
   });
});

로그인 후 복사

샘플 코드에서는 먼저 새로운

요소를 생성하여 테이블에 삽입합니다.

실제 개발에서는

요소 추가 작업을 구현하기 위해 특정 요구에 따라 다양한 방법을 선택합니다. 어떤 방법을 사용하든 jQuery의 유연성과 편리함을 활용하여 HTML 문서를 동적으로 수정하고 확장할 수 있습니다. 동시에 페이지의 전체적인 아름다움을 보장하기 위해 요소를 동적으로 추가할 때 요소의 속성과 스타일을 올바르게 설정하는 데에도 주의를 기울여야 합니다.

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

원천：php.cn

이전 기사：jquery에서 스크롤뷰를 사용하는 방법 다음 기사：ie8 jquery get이 지원되지 않습니다.

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

저자별 최신 기사