이 블로그 게시물은 JavaScript에서 동적 테이블을 만드는 프로세스를 보여줍니다.
JavaScript에서 동적으로 테이블을 만드는 방법은 무엇입니까?
JavaScript에서 동적 테이블이 생성되는 방법을 설명하는 예를 살펴보겠습니다.
예시
시작하려면 새 HTML 문서에 다음 줄을 작성하여 데이터를 가져온 다음 동적으로 추가하여 테이블에 표시하는 양식을 만듭니다.
< 사업부 ID = '마이폼' >
< h4 > 아래 양식을 작성하십시오 : h4 >
< 상표 > 이름 : 상표 >
< 입력 유형 = '텍스트' ID = '이름' >< br >< br >
< 상표 > 성별 : 상표 >
< 입력 유형 = '텍스트' ID = '성별' >< br >< br >
< 상표 > 지정 : 상표 >
< 입력 유형 = '텍스트' ID = '지정' >< br >< br >
< 상표 > 합류 날짜 : 상표 >
< 입력 유형 = '데이트' ID = '데이트' >< br >< br >
< 버튼 ID = '추가하다' 값 = '추가하다' > 테이블에 데이터 추가 단추 >
사업부 >
위의 코드 조각에서:
- 먼저 '라는 제목을 만듭니다. 아래 양식을 작성하십시오. '.
- '에 대한 입력 필드를 만듭니다. 이름 ”, “ 성별 ”, “ 지정 ', 그리고 ' 입사일 ” 할당된 id의 “ 이름 ”, “ 성별 ”, “ 지정 ', 그리고 ' 데이트 ” 각각 사용자로부터 입력 값을 가져옵니다.
- 이러한 ID는 JavaScript에서 요소의 참조를 가져오는 데 사용됩니다.
- 그런 다음 ' 온 클릭 '를 호출할 속성 addTableRow() ” 테이블에 데이터를 추가하고 표시하는 스크립트 파일의 기능:
여기 HTML 파일에서 다음 코드 줄을 작성하여 데이터가 동적으로 추가되는 테이블 구조를 만듭니다.
< 사업부 >
< h4 > 직원 기록 비 > h4 >
< 센터 >
< 테이블 ID = '테이블데이터' 국경 = '1' 셀패딩 = '둘' >
< 트 >
< td >< 비 > 이름 비 > td >
< td >< 비 > 성별 비 > td >
< td >< 비 > 지정 비 > td >
< td >< 비 > 입사일 비 > td >
트 >
테이블 >
센터 >
사업부 >
위의 코드에서:
- ID가 '인 테이블을 만듭니다. 테이블데이터 ”는 스크립트 파일에서 이 테이블의 참조를 가져온 다음 데이터를 추가하는 데 사용됩니다.
- 테이블에는 ' 이름 ”, “ 성별 ”, “ 지정 ', 그리고 ' 입사일 ” 열 이름에 따라 데이터를 저장합니다.
HTML 파일을 실행하면 다음과 같은 브라우저 출력이 나타납니다.
JavaScript를 사용하여 동적으로 테이블을 생성하는 기능을 추가해 보겠습니다. 스크립트 파일 또는 태그에서 동적으로 테이블을 생성하는 아래 코드를 사용하십시오.
기능 테이블 행 추가 ( ) {~였다 이름 = 문서. getElementById ( '이름' ) ;
~였다 성별 = 문서. getElementById ( '성별' ) ;
~였다 지정 = 문서. getElementById ( '지정' ) ;
~였다 데이트 = 문서. getElementById ( '데이트' ) ;
~였다 테이블 = 문서. getElementById ( '테이블데이터' ) ;
~였다 행 수 = 테이블. 행 . 길이 ;
~였다 열 = 테이블. 삽입행 ( 행 수 ) ;
열. 삽입셀 ( 0 ) . innerHTML = 이름. 값 ;
열. 삽입셀 ( 1 ) . innerHTML = 성별. 값 ;
열. 삽입셀 ( 둘 ) . innerHTML = 지정. 값 ;
열. 삽입셀 ( 삼 ) . innerHTML = 데이트. 값 ;
}
위 스니펫에서:
- 먼저 ' addTableRow() ” HTML 버튼의 클릭 이벤트를 트리거합니다.
- 그런 다음 ' getelementById() ” 메서드를 호출하고 변수에 저장합니다.
- 이러한 변수는 HTML '을 사용하여 입력 필드의 값을 가져오는 데 사용됩니다. 값 ” 속성을 사용하여 테이블의 개별 셀에 설정합니다. innerHTML ' 재산.
- '를 활용하여 테이블에 행을 추가합니다. 테이블.행.길이 ” 속성에 값을 저장합니다.
산출
위의 출력은 JavaScript를 사용하여 양식에 데이터를 추가하여 동적 테이블이 성공적으로 생성되었음을 나타냅니다.
결론
동적 테이블은 JavaScript 사전 정의된 메서드와 함께 다양한 HTML 속성을 사용하여 생성됩니다. 먼저 HTML 파일에 양식을 만든 다음 ' getElementById() ” 메서드를 사용하여 입력한 값을 검색합니다. 값 ' 재산. ' innerHTML ' 재산. 이 블로그 게시물은 JavaScript에서 동적 테이블을 만드는 프로세스를 보여줍니다.