>웹 프론트엔드 >HTML 튜토리얼 >JavaScript DOM을 사용하여 테이블에 행을 추가하는 방법은 무엇입니까?

JavaScript DOM을 사용하여 테이블에 행을 추가하는 방법은 무엇입니까?

PHPz
PHPz앞으로
2023-09-16 17:57:071247검색

如何使用JavaScript DOM向表格添加行?

JavaScript DOM을 사용하여 테이블에 행을 추가하는 방법을 알아봅니다. 이 목표를 달성하기 위해 몇 가지 방법이 있습니다. 그 중 일부는 다음과 같습니다:

  • insertRow() 메서드를 사용하세요

  • 새로운 요소를 만들어

insertRow() 메소드를 사용하세요

테이블 시작 부분에 새 행을 삽입하려면 insertRow() 메서드를 사용하세요. 새로운 요소를 생성하여 테이블에 삽입합니다. 테이블의 위치를 ​​지정하는 매개변수로 숫자를 허용합니다. 매개변수를 전달하지 않으면 테이블 시작 부분에 행이 삽입됩니다. 테이블 끝에 행을 삽입하려면 -1을 매개변수로 전달합니다.

문법

으아악

반환 값 − 삽입된 요소.

우리가 알고 있듯이 적절한 테이블에는 테이블 행()뿐만 아니라 테이블 셀()이라는 테이블 문서도 있습니다. 행 내에 셀을 삽입하려면 insertCell() 메서드를 사용합니다. 테이블 행 내에 요소를 생성합니다. 행 내 셀의 인덱스를 지정하여 숫자를 인수로 허용합니다.

문법

다음은 셀을 삽입하는 구문입니다.

으아악

반환 값 − 삽입된 요소.

테이블에 행을 추가하는 단계

  • 데이터 테이블 요소를 가져옵니다.

  • insertRow 메소드를 사용하여 행을 생성하고 테이블에 삽입합니다.

  • insertCell 메소드를 사용하여 새 셀을 생성하고 생성한 행에 삽입합니다.

  • 새로 생성된 셀에 데이터를 추가합니다.

Example

은 다음과 같이 번역됩니다.

Example

이 예에는 학생의 이름과 나이가 포함된 테이블이 있습니다. 테이블 끝에 새로운 학생을 추가하겠습니다.

으아악

새로운 요소를 만들어

이 방법에서는 document.createElement() 메서드를 사용하여 새 행과 열을 만듭니다.

방법

다음은 요소를 생성하여 테이블에 행을 추가하는 단계입니다.

  • 행을 추가하려면 테이블 본문 요소를 가져오세요

  • 행 요소 만들기

  • 셀을 만들고 셀에 데이터 삽입

  • 행에 셀 추가

  • 테이블 본문에 행 추가

Example

은 다음과 같이 번역됩니다.

Example

으으으으

위 내용은 JavaScript DOM을 사용하여 테이블에 행을 추가하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 tutorialspoint.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제