js 동적 생 성,표 예제 코드 삭제

2000*5 의 표를 만 듭 니 다.각 칸 의 내용 은 줄 번호+쉼표+열 번호 방법 입 니 다.1:createElement 를 사용 하여 표를 만 들 고 insertRow 와 insertCell 방법 으로 행렬 을 만 듭 니 다.칸 의 내용 은 innerHTML 속성 으로 채 웁 니 다.방법 2:createElement 를 사용 하여 표를 만 들 고 CreateElement 방법 으로 행렬 을 만 들 며 셀 의 내용 은 createTextNode 방법 으로 채 웠 습 니 다.방법 3:표 innerHTML 속성 을 연결 하 는 문자열,문자열+=연산 자 를 사용 하여 문자열 을 연결 하 는 방법 4:표 innerHTML 속성 을 연결 하 는 문자열,각 문자열 은 배열 에 추가 되 어 있 으 며,마지막 으로 배열 의 join 방법 으로 대상 문자열 을 생 성 합 니 다.실행 시간 비교:방법 실행 시간(ms)방법 1 93037 방법 2 3341 방법 3 2795 방법 4 500 구체 적 인 절 차 는 다음 과 같다.

 
<html> 
<head> 
<title>test page</title> 
<script type='text/javascript'> 
<!-- 
function createTable() { 
var t = document.createElement('table'); 
for (var i = 0; i < 2000; i++) { 
var r = t.insertRow(); 
for (var j = 0; j < 5; 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 < 2000; i++) { 
var r = document.createElement('tr'); 
for (var j = 0; j < 5; j++) { 
var c = document.createElement('td'); 
var m = document.createTextNode(i + ',' + j); 
c.appendChild(m); 
r.appendChild(c); 
} 
b.appendChild(r); 
} 
t.appendChild(b); 
document.getElementById('table1').appendChild(t); 
t.setAttribute('border', '1'); 
} 
function createTable3() { 
var data = ''; 
data += '<table border=1><tbody>'; 
for (var i = 0; i < 2000; i++) { 
data += '<tr>'; 
for (var j = 0; j < 5; j++) { 
data += '<td>' + i + ',' + j + '</td>'; 
} 
data += '</tr>'; 
} 
data += '</tbody><table>'; 
document.getElementById('table1').innerHTML = data; 
} 
function createTable4() { 
var data = new Array(); 
data.push('<table border=1><tbody>'); 
for (var i = 0; i < 2000; i++) { 
data.push('<tr>'); 
for (var j = 0; j < 5; j++) { 
data.push('<td>' + i + ',' + j + '</td>'); 
} 
data.push('</tr>'); 
} 
data.push('</tbody><table>'); 
document.getElementById('table1').innerHTML = data.join(''); 
} 
function showFunctionRunTime(f) { 
var t1 = new Date(); 
f(); 
var t2 = new Date(); 
alert(t2 - t1); 
} 
//--> 
</script> 
</head> 
<body> 
<div id="table1" style="border: 1px solid black"> 
</div> 
<script> 
showFunctionRunTime(createTable); 
showFunctionRunTime(createTable2); 
showFunctionRunTime(createTable3); 
showFunctionRunTime(createTable4); 
</script> 
</body> 
</html>

1,inserRow()와 insertCell()함수 insertRow()함 수 는 인 자 를 가 져 올 수 있다.형식 은 다음 과 같다.insertRow(index)이 함 수 는 새로운 줄 을 index 의 줄 앞 에 추가 할 것 이다.예 를 들 어 insertRow(0).첫 줄 에 새 줄 을 추가 하기 전에기본 insertRow()함 수 는 insertRow(-1)에 해당 하 며,새 줄 을 표 의 마지막 에 추가 합 니 다.insert Cell()과 insert Row 의 용법 은 같다.2.동적 설정 속성 과 이벤트 위의 innerHTML 과 innerText 는 모두 열의 속성 입 니 다.innerText 는사이 에 추 가 된 텍스트 입 니 다.innerHTML 은사이 에 추 가 된 HTML 코드 로 다른 속성 을 설정 하 는 것 도 같은 방식 입 니 다.예 를 들 어 줄 배경 색 tr.bgColor='red'를 설정 합 니 다.colspan 속성 td.colSpan=3 설정;설정 이벤트 도 마찬가지 입 니 다.간단하게 설명해 야 합 니 다.예 를 들 어,나 는 새 줄 을 클릭 할 때 자신 이 정의 한 함수 new Click 을 실행 하 게 하려 고 합 니 다.new Click 함 수 는 다음 과 같 습 니 다:function new Click(){alert("이것 은 새로 추 가 된 줄 입 니 다").곶 onclick 이벤트 에 이 함 수 를 설정 하 는 코드 는 다음 과 같 습 니 다.tr.onclick=newClick;여기 서 필요 한 것 은,=뒤의 부분 은 함수 명 이 어야 하 며,따옴표 가 있어 서 는 안 된다 는 것 이다.new Tr.onclick=new Click();　　newTr.onclick = 'newClick'; 　　newTr.onclick = "newClick"; 위의 서법 은 모두 잘못된 것 이다.아래 의 쓰기 도 정확 한 newTr.onclick=function newClick(){alert("새로 추 가 된 줄 입 니 다");}표 동적 삭제 방법 1:

 
<table id=mxh border=1> 
<tr> 
<td> 1 </td><td onclick="deleteRow('mxh',this.parentElement.rowIndex)">    </td> 
</tr> 
<tr> 
<td> 2 </td><td onclick="deleteRow('mxh',this.parentElement.rowIndex)">    </td> 
</tr> 
</table> 
<script> 
function deleteRow (tableID, rowIndex) { 
var table =document.all[tableID] 
table.deleteRow(rowIndex); 
} 
function getRowNum(tableID){ 
var tab = document.all[tableID] 
//     
var rows = tab.rows.length ; 
//     
var cells = tab.rows.item(0).cells.length ; 
} 
</script>

방법 2:

 
<table id=mxh border=1> 
<tr> 
<td> 1 </td><td onclick="deleteRow(this.parentElement)">    </td> 
</tr> 
<tr> 
<td> 2 </td><td onclick="deleteRow(this.parentElement)">    </td> 
</tr> 
</table> 
<script> 
function deleteRow (obj) { 
obj.parentElement.removeChild(obj); 
} 
</script>

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

c\#워드 문서 에서 표를 만 드 는 방법 에 대한 자세 한 설명

string message = ""; string name = "xiehuan.doc"; object filename = @"C:\Users\xiehuan\xxx\" + name; // // Word Microso...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

js 동적 생 성,표 예제 코드 삭제

좋은 웹페이지 즐겨찾기