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

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

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

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

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

코드 복사 코드는 다음과 같습니다. &lt ;head> 테스트 페이지 함수 createTable( ) { var t = document.createElement('table'); for (var i = 0; i var r = t.insertRow(); for (var j = 0; j var c = r.insertCell() c.innerHTML = i ',' j } >document.getElementById( 'table1').appendChild(t); t.setAttribute('border', '1') } function createTable2() { var t = document .createElement('table'); var b = document.createElement('tbody'); for (var i = 0; i var r = document.createElement ('tr') ; for (var j = 0; j var c = document.createElement('td') var m = document.createTextNode(i ',' j) ; c.appendChild(m); } b.appendChild(r) t.appendChild (b) document.getElementById('table1').appendChild(t) t.setAttribute('border', '1') } function createTable3() { var data = ''; data = ' ' for (var i = 0; i data = ' '; for (var j = 0; j data = ' ',' j ' '; 🎜>} data = ' '; } data = ' ' document.getElementById('table1').innerHTML = data; } function createTable4() { var data = new Array() data.push(' '); >for (var i = 0; i data.push(' ') for (var j = 0; j data.push(' ' i ',' j ' ') } data.push(' ') }; data.push(' ') document.getElementById('table1').innerHTML = data.join('') } 함수 showFunctionRunTime(f) { var t1 = new Date(); var t2 = new Date() alert(t2 - t1)} //- > showFunctionRunTime(createTable2) showFunctionRunTime(createTable4); 🎜> 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행 이 행 삭제 2번째 줄 이 행 삭제 function deleteRow (tableID, rowIndex) { var table =document .all[tableID] table.deleteRow(rowIndex); } function getRowNum(tableID){ var tab = document.all[tableID] //테이블 행 수 var 행 = tab.rows.length; //테이블 열 수 var 셀 = tab.rows.item(0).cells.length ;

방법 2:

코드 복사 코드는 다음과 같습니다. 1행 삭제 이 행 2번째 줄 function deleteRow (obj) { obj.parentElement.removeChild( obj); }