HTML dynamic table add/delete row

HTML dynamic table add/delete row

보통적인 상황이면 createElement를 사용해서,
table.rows.insertRow를 하면 가능하지만 500개 이상 넘어가면 급속도로 느려진다.

물론 파이어폭스나 크롬에서는 어떠한 방법으로 구현해서 빠르기 때문에 문제가 없지만,
IE에서는 다른 방법을 모색해야 했다.

결론적으로 IE에 특화된 innerHTML을 사용하면 비약적으로 속도가 향상된다.
다만 이때 주의할 점은 table 내에 innerHTML은 읽기전용이기 때문에
table 밖에 별도의 div를 만들어서 table 전체를 만들어 줘야 한다.

<div id=”divDataGrid”>
<TABLE id=”dataTable” width=”350px” border=”1″>
<TBODY>
<TR>
<TD><INPUT type=”checkbox” name=”chk”/></TD>
<TD> 1 </TD>
<TD> <INPUT type=”text” /> </TD>
</TR>
</TBODY>
</TABLE>
</div>

javascript로 구현한 함수를 살펴보면, 다음과 같다.
function addRowsWithInnerHTMLString(divID) {
var debugString = “”;
var startTime = new Date();

var html = “<table id=\”dataTable\” width=\”350\” border=\”1\”>”;
html += “<tbody>”;
for(var i = 0; i < 3000; i++)
{
html += “<tr><td><input type=\”checkbox\” value=\”” + i + “\”/></td><td>” + i + “</td><td><input type=\”text\” value=\”” + i + “\”/></td></tr>”;
}
html += “</tbody>”;
html += “</table>”;

var endTime = new Date();
var executionTime = endTime.getTime() – startTime.getTime();
debugString += “연산 시간: ” + executionTime + “\n”;

var div = document.getElementById(divID);
div.innerHTML = html;

endTime = new Date();
executionTime = endTime.getTime() – startTime.getTime() – executionTime;

debugString += “렌더링 시간: ” + executionTime + “\n”;
alert(debugString);
}

 

IE에서 실행한 결과 3000개를 넣을때
문자열 연산 시간이 0.4초
테이블 렌더링 시간이 0.1초
총 0.5가 정도가 소요되었다.

파이어폭스에서는 약 0.1 정도가 소요되었다.

 

array를 이용하면 약간 나을거 같아서 했는데, 결과 비슷했다.

function addRowsWithInnerHTMLArray(divID) {
var debugString = “”;
var startTime = new Date();

var html = [];
html.push(“<table id=\”dataTable\” width=\”350\” border=\”1\”>”);
html.push(“<tbody>”);
for(var i = 0; i < 3000; i++)
{
html.push(“<tr><td><input type=\”checkbox\” value=\”” + i + “\”/></td><td>” + i + “</td><td><input type=\”text\” value=\”” + i + “\”/></td></tr>”);
}
html.push(“</tbody>”);
html.push(“</table>”);

var endTime = new Date();
var executionTime = endTime.getTime() – startTime.getTime();
debugString += “연산 시간: ” + executionTime + “\n”;

var dataGrid = document.getElementById(divID);
dataGrid.innerHTML = html.join(“”);

endTime = new Date();
executionTime = endTime.getTime() – startTime.getTime() – executionTime;

debugString += “렌더링 시간: ” + executionTime + “\n”;
alert(debugString);
}

array.push하는 부분은 월등히 빠르지만, array.join() 했을때 역시 이부분이 속도 오래걸려서
전체적으로 비슷한 속도를 보여주었다.

Leave a Reply

Your email address will not be published. Required fields are marked *