이 설명서에서는 JavaScript를 사용하여 테이블에 행을 추가하는 절차를 설명합니다.
JavaScript를 사용하여 HTML 테이블에 행을 추가하는 방법은 무엇입니까?
테이블에 행을 추가하려면 다음 절차를 따르십시오.
각 절차를 개별적으로 확인해 보겠습니다.
방법 1: insertRow() 메서드를 사용하여 HTML 테이블에 행 추가
' 삽입 행() ” 메소드는 테이블의 시작 부분에 새 행을 추가하는 데 사용됩니다. 새로운
테이블의 마지막/끝에 행을 추가하려면 index '를 전달하십시오. -1 '를 논거로 삼는다.
통사론
insertRow() 메서드를 사용하여 테이블에 행을 추가하려면 다음 구문을 사용하십시오.
테이블. 삽입 행 ( 인덱스 ) ;
여기, ' 인덱스 '는 표의 끝이나 시작과 같이 새 행을 추가하려는 위치를 나타냅니다.
예 1: 테이블의 맨 위/시작에 행 추가
여기에서는 HTML을 사용하여 HTML 파일에 테이블과 버튼을 만듭니다. <표> 그리고 <버튼> 태그. 테이블에는 세 개의 행과 세 개의 열 또는 셀이 있습니다.
< 테이블 ID = '테이블' >< 트르 >
< TD > 행의 셀 1 TD >
< TD > 행의 셀 1 TD >
< TD > 행의 셀 1 TD >
트르 >
< 트르 >
< TD > 행의 셀 둘 TD >
< TD > 행의 셀 둘 TD >
< TD > 행의 셀 둘 TD >
트르 >
< 트르 >
< TD > 행의 셀 삼 TD >
< TD > 행의 셀 삼 TD >
< TD > 행의 셀 삼 TD >
트르 >
테이블 >
< 브 >
그런 다음 ' 행 추가() ' 버튼 클릭 시:
< 버튼 유형 = '단추' 클릭 = '행 추가()' > 클릭하여 테이블 상단에 행 추가 단추 >표의 스타일을 지정하기 위해 각 셀과 표의 테두리를 아래와 같이 설정합니다.
테이블, TD {국경 : 1px 솔리드 블랙 ;
}
이제 JavaScript를 사용하여 테이블의 맨 위/시작에 있는 테이블에 행을 추가합니다. 그렇게 하려면 ' 행 추가() ' 버튼의 onclick() 이벤트에서 호출됩니다. 그런 다음 ' getElementById() ' 방법. 그 후 ' 삽입 행() '를 전달하여 ' 0 ” 인덱스는 테이블의 시작 부분에 행이 추가될 것임을 나타내는 매개변수입니다.
그런 다음 ' 삽입셀() 행에 추가할 셀 수를 나타내는 인덱스를 전달하는 방법입니다. 마지막으로 '를 사용하여 셀에 텍스트 데이터 또는 텍스트를 추가합니다. 내부HTML ' 재산:
기능 추가 행 ( ) {변수 테이블 행 = 문서. getElementById ( '테이블' ) ;
행이었다 = 테이블 행. 삽입 행 ( 0 ) ;
여기서 cell1 = 열. 삽입셀 ( 0 ) ;
여기서 cell2 = 열. 삽입셀 ( 1 ) ;
어디에 cell3 = 열. 삽입셀 ( 둘 ) ;
세포1. 내부HTML = '새로운 행의 세포' ;
세포2. 내부HTML = '새로운 행의 세포' ;
세포3. 내부HTML = '새로운 행의 세포' ;
}
출력에서 볼 수 있듯이 버튼을 클릭하면 기존 테이블 상단에 새 행이 추가됩니다.
예 2: 테이블 끝에 행 추가
테이블의 마지막/끝에 행을 삽입하려면 ' -1 '에 대한 '인덱스 삽입 행() ' 방법. 버튼을 클릭하면 마지막으로 행이 추가됩니다.
기능 추가 행 ( ) {변수 테이블 행 = 문서. getElementById ( '테이블' ) ;
행이었다 = 테이블 행. 삽입 행 ( - 1 ) ;
여기서 cell1 = 열. 삽입셀 ( 0 ) ;
여기서 cell2 = 열. 삽입셀 ( 1 ) ;
어디에 cell3 = 열. 삽입셀 ( 둘 ) ;
세포1. 내부HTML = '새로운 행의 세포' ;
세포2. 내부HTML = '새로운 행의 세포' ;
세포3. 내부HTML = '새로운 행의 세포' ;
}
산출
다른 방법으로 넘어갑시다!
방법 2: 새 요소를 만들어 HTML 테이블에 행 추가
'를 포함하여 JavaScript 방법을 사용하여 새 요소를 생성하는 테이블에 행을 추가하는 또 다른 방법이 있습니다. 생성 요소() ' 방법 및 ' 추가자식() ' 방법. createElement()는
통사론
제공된 구문에 따라 JavaScript를 사용하여 테이블에 행을 추가하기 위한 새 요소를 만듭니다.
문서. 요소 생성 ( '트르' ) ;여기서 ' 트르 '는 테이블 행입니다.
예시
이제 CSS 파일과 함께 HTML에서 이전에 만든 동일한 테이블을 사용하지만 JavaScript 파일에서는 ' 생성 요소() ' 방법. 그런 다음 '를 사용하여 셀에 데이터 또는 텍스트를 추가합니다. 내부HTML ' 재산. 마지막으로 ' 추가자식() 행에 셀을 추가한 다음 테이블에 행을 추가하는 '메서드:
기능 추가 행 ( ) {변수 테이블 행 = 문서. getElementById ( '테이블' ) ;
행이었다 = 문서. 요소 생성 ( '트르' ) ;
여기서 cell1 = 문서. 요소 생성 ( '티' ) ;
여기서 cell2 = 문서. 요소 생성 ( '티' ) ;
어디에 cell3 = 문서. 요소 생성 ( '티' ) ;
세포1. 내부HTML = '새로운 행의 세포' ;
세포2. 내부HTML = '새로운 행의 세포' ;
세포3. 내부HTML = '새로운 행의 세포' ;
열. 추가자식 ( 셀1 ) ;
열. 추가자식 ( 셀2 ) ;
열. 추가자식 ( 세포3 ) ;
테이블 행. 추가자식 ( 열 ) ;
}
출력은 새 행이 테이블 끝에 성공적으로 추가되었음을 보여줍니다.
JavaScript를 사용하여 테이블에 행을 추가하는 모든 방법을 컴파일했습니다.
결론
테이블에 행을 추가하려면 insertRow() 메서드를 사용하거나 appendChild() 메서드 및 createElement() 메서드를 비롯한 JavaScript 사전 정의 메서드를 사용하여 새 요소를 만듭니다. 인덱스를 전달하여 insertRow() 메서드를 사용하여 테이블 끝의 시작 부분에 행을 추가할 수 있습니다. 이 매뉴얼에서는 JavaScript를 사용하여 버튼을 클릭하여 테이블에 새 행을 추가하는 절차를 설명했습니다.