67 lines
1.4 KiB
HTML
67 lines
1.4 KiB
HTML
<html>
|
|
|
|
<head>
|
|
|
|
<style>
|
|
table {
|
|
width: 100%;
|
|
}
|
|
div.input {
|
|
border: 1px solid gray;
|
|
width: 300px;
|
|
}
|
|
</style>
|
|
|
|
<script type="text/javascript">
|
|
function loadTable() {
|
|
var start = +new Date();
|
|
|
|
var table = document.createElement('table');
|
|
var tbody = document.createElement('tbody');
|
|
table.appendChild(tbody);
|
|
table.className = 'table';
|
|
|
|
var count = 10000;
|
|
for (var i = 0; i < count; i++) {
|
|
var tr = document.createElement('tr');
|
|
tbody.appendChild(tr);
|
|
|
|
var td1 = document.createElement('td');
|
|
tr.appendChild(td1);
|
|
var input1 = document.createElement('div');
|
|
input1.className = 'input';
|
|
input1.contentEditable = 'true';
|
|
input1.innerHTML = 'input1 ' + i;
|
|
td1.appendChild(input1);
|
|
|
|
var td2 = document.createElement('td');
|
|
tr.appendChild(td2);
|
|
var input2 = document.createElement('div');
|
|
input2.className = 'input';
|
|
input2.contentEditable = 'true';
|
|
input2.innerHTML = 'input2 ' + i;
|
|
td2.appendChild(input2);
|
|
|
|
var td3 = document.createElement('td');
|
|
td3.appendChild(document.createTextNode('bla bla'));
|
|
tr.appendChild(td3);
|
|
}
|
|
|
|
document.getElementById('table').appendChild(table);
|
|
|
|
var height = table.clientHeight; // force a reflow
|
|
|
|
var end = +new Date();
|
|
console.log('created table in ' + (end-start) + ' ms');
|
|
}
|
|
</script>
|
|
</head>
|
|
|
|
<body onload="loadTable();">
|
|
|
|
<div id="table"></div>
|
|
|
|
</body>
|
|
|
|
</html>
|