자바스크립트 테이블 행 삭제

PHPz
풀어 주다: 2023-05-21 10:01:37
원래의
1737명이 탐색했습니다.

JavaScript에서는 DOM 조작을 통해 테이블의 행을 쉽게 삭제할 수 있습니다. 다음은 테이블에서 행을 삭제하는 두 가지 기본 방법을 소개합니다.

  1. 삭제는 table 테이블 객체의 deleteRow() 메소드를 통해 이루어집니다.

HTML에서는 삭제할 행 번호에 id를 할당하거나 삭제할 행의 위치를 지정하여 삭제할 수 있습니다. 코드는 다음과 같습니다.

코드 설명:

  • 이 메서드의 deleteRow() 메서드는 지정된 위치(0부터 계산)의 행을 삭제하는 데 사용됩니다.
  • 이 예에서는 첫 번째 행의 위치가 0이고 두 번째 행의 위치가 1입니다.
  • 삭제하려는 행이 테이블에 없으면 오류가 발생합니다.
  • 테이블에 해당하는 변수를 도입해야 합니다. 변수의 값은 getElementById() 또는 다른 방법을 사용하여 얻을 수 있습니다.
  1. 삭제는 HTMLElement 객체의 parentNode 속성을 통해 이루어집니다.

위의 방법 외에도 parentNode 속성을 사용하여 요소를 삭제할 수도 있습니다. HTML에서는 현재 선택된 행 요소의 상위 요소, 즉 테이블의 tbody 요소를 가져와서 행을 삭제할 수 있습니다. 코드는 다음과 같습니다.

코드 설명:

  • 먼저 삭제할 행 요소를 가져오면 getElementById() 메서드나 다른 메서드를 사용하여 가져올 수 있습니다.
  • 그런 다음 행 요소 개체의 parentNode 속성을 사용하여 테이블 테이블 개체를 가져오고 해당 개체에서 tbody 요소를 가져옵니다.
  • 마지막으로 tbody 객체의 RemoveChild() 메서드를 사용하여 선택한 행 요소를 제거합니다.

요약

deleteRow() 메서드를 사용하거나 parentNode 속성을 사용하면 테이블의 행을 쉽게 삭제할 수 있습니다. 많은 개발자는 단순성과 명확성의 이점을 고려하여 deleteRow() 메서드 사용을 선호합니다. 반면에 parentNode 특성을 사용하는 것은 HTML 문서의 모든 요소에 사용할 수 있는 보다 일반적인 접근 방식입니다. 재사용 가능한 기능을 구현하려는 개발자의 경우 parentNode 특성을 사용하는 것이 의심할 여지 없이 더 적합합니다.

위 내용은 자바스크립트 테이블 행 삭제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!