Node.js는 동적으로 테이블을 생성하고 삭제합니다. 샘플 code_javascript 기술

2000*5 테이블을 생성합니다. 각 셀의 내용은 행 번호와 쉼표 열 번호입니다.

방법 1: createElement를 사용하여 테이블을 생성하고 insertRow 및 insertCell 메서드를 사용하여 행과 열을 생성한 후 셀 내용 채우기에 대한 innerHTML 속성입니다.
방법 2: createElement를 사용하여 테이블을 생성하고, CreateElement 메서드를 사용하여 행과 열을 생성하고, createTextNode 메서드를 사용하여 셀 내용을 채웁니다.
방법 3: 테이블의 innerHTML 속성 문자열을 연결하고 문자열 = 연산자를 사용하여 문자열을 연결합니다.
방법 4: 테이블의 innerHTML 속성 문자열을 연결하고 각 문자열을 배열에 추가합니다. , 마지막으로 배열 생성 대상 문자열의 조인 메서드를 호출합니다.

실행 시간 비교:
방법 실행 시간(ms)
방법 1 93037
방법 2 3341
방법 3 2795
방법 4 500

특정 프로그램은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

< ;head>
<제목>테스트 페이지

<script> <br>showFunctionRunTime(createTable2) <br>showFunctionRunTime(createTable4); 🎜></script>


1. insertRow() 및 insertCell() 함수
insertRow() 함수는 다음 형식의 매개변수를 사용할 수 있습니다.
insertRow(index)
이 함수는 행 앞에 새 행을 추가합니다. 예를 들어 insertRow(0)은 첫 번째 행 앞에 새 행을 추가합니다. 기본 insertRow() 함수는 테이블 끝에 새 행을 추가하는 insertRow(-1)과 동일합니다.
insertCell()과 insertRow의 사용법은 동일합니다.
2. 동적으로 설정된 속성 및 이벤트
위의 innerHTML과 innerText는 모두 열 속성입니다.
innerText는 사이에 추가된 텍스트이고, innerHTML은 사이에 추가된 HTML 코드입니다.
같은 방식으로 다른 속성을 설정합니다. 행 배경색
tr.bgColor = 'red';
colspan 속성 설정
td.colSpan = 3;

이벤트 설정도 마찬가지이므로 간단한 설명이 필요합니다.
예를 들어, 새 행을 클릭할 때 자체 정의 함수인 newClick을 실행하고 싶습니다. newClick 함수는 다음과 같습니다.
function newClick(){
Alert("새로 추가된 행입니다. ");
　｝
　onclick 이벤트에 이 함수를 설정하는 코드는 다음과 같습니다.
　tr.onclick = newClick;
　여기서 해야 할 일은 = 이후의 부분이 다음과 같아야 한다는 것입니다. 함수 이름이며 따옴표로 묶을 수 없습니다.
newTr.onclick = 'newClick';
newTr.onclick = "newClick"
위의 내용이 잘못되었습니다. .
다음 쓰기도 맞습니다
newTr.onclick = function newClick(){
Alert("새로 추가된 행입니다.")
}
테이블의 동적 삭제
방법 1:

코드 복사 코드는 다음과 같습니다.

1행	이 행 삭제< /td>
2번째 줄	이 행 삭제

<script> <br>function deleteRow (tableID, rowIndex) { <br>var table =document .all[tableID] <br>table.deleteRow(rowIndex); <br>} <br>function getRowNum(tableID){ <br>var tab = document.all[tableID] <br>//테이블 행 수 <br>var 행 = tab.rows.length; <br>//테이블 열 수<br>var 셀 = tab.rows.item(0).cells.length <br></script> ;


방법 2:

코드 복사 코드는 다음과 같습니다.

1행	삭제 이 행
2번째 줄

<script> <br>function deleteRow (obj) { <br>obj.parentElement.removeChild( obj); <br>} <br></script>