目标：生成一个2000*5的表格，每个单元格的内容是行号+逗号+列号 (转别人的)
方法一：使用createElement生成表格，使用insertRow和insertCell方法生成行列，单元格的内容使用innerHTML属性进行填充。
方法二：使用createElement生成表格，使用CreateElement方法生成行列，单元格的内容使用了createTextNode方法填充。
方法三：拼接表格innerHTML属性的字符串，使用字符串 += 操作符链接字符串
方法四：拼接表格innerHTML属性的字符串，各个字符串追加数组里面，最后调用数组的join方法生成目标字符串。
| 方法 |
运行时间(ms) |
| 方法一 |
93037 |
| 方法二 |
3341 |
| 方法三 |
2795 |
| 方法四 |
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>
分享到：
相关推荐
JavaScript 动态创建表格知识点总结 JavaScript 动态创建表格是指使用 JavaScript 语言来动态地创建和修改 HTML 表格的行和单元格。这种技术非常有用，特别是在需要频繁地更新表格数据的情况下。 动态创建表格的两...
js动态创建表格，利用dom技术动态输入行列来创建表格
Javascript动态创建表格 兼容google浏览器、360，ie等浏览器，很实用
### JavaScript 下动态创建表格的三种方式 在网页开发过程中，经常需要通过JavaScript来动态地创建或更新HTML元素，其中就包括表格（`<table>`）。本文将详细介绍在JavaScript中动态创建表格的三种常见方法，并对每...
标题中的“老裴帮助关于Javascript动态创建表格的小练习”指的是一个使用JavaScript编程语言来动态创建HTML表格的学习资源或教程。JavaScript是一种广泛应用于客户端Web开发的脚本语言，它允许开发者在用户与网页...
总结来说，这个压缩包提供的知识涵盖了JavaScript动态创建和操作HTML表格的基本技巧，对于想要提升网页交互性的开发者尤其有用。通过学习和实践这些方法，你可以创建出更具活力和用户友好的网页应用。
javaScript动态创建表格
在JavaScript中动态创建表格是一项常见的任务，特别是在网页交互和数据展示中。本文将深入探讨如何利用JavaScript的`insertRow()`和`insertCell()`方法来添加行和单元格，以及如何使用`deleteRow()`和`deleteCell()`...
我们可以利用`document.createElement()`、`.appendChild()`等方法动态创建这些元素。 4. **数据驱动视图**：根据JSON数据的结构，我们需要遍历数据，为每一项生成对应的表格行。如果列数不固定，我们需要在开始...
JS DOM动态创建表格 行 列
JavaScript动态创建表格是一项基础且实用的Web开发技能，它允许开发者在客户端使用JavaScript编程语言根据需要动态生成表格元素。这在处理动态数据集、创建用户交互式界面以及动态修改网页结构时尤其有用。 在本文...
自已写的一个动态创建表格的qml程序，通过js来控制逻辑，还是很有用
总结来说，使用JavaScript动态创建和管理表格是一种非常实用且强大的功能，可以帮助开发者根据用户的需求实时调整表格结构。通过上述方法的介绍，你可以更灵活地控制表格的显示效果，提高用户体验。
以上就是JavaScript动态操作表格的基本方法。实际应用中，可能还需要考虑到事件监听、异步数据加载等情况。通过熟练掌握这些技巧，你可以创建出交互性强、功能丰富的表格应用。记住，实践是检验理论的最好方式，尝试...
使用JavaScript和DOM动态创建表格
本文所探讨的方法主要涉及使用JavaScript动态创建表格，并为表格中的每一个单元格添加点击事件处理函数，实现点击单元格时能够弹出单元格内容并改变单元格背景颜色的效果。下面详细地对标题、描述和给出的部分内容...
在探讨如何使用JavaScript动态创建一个2000行5列的大规模表格时，我们首先要理解JavaScript DOM（Document Object Model）操作的基本概念。DOM是用于HTML和XML文档的标准对象模型和编程接口，允许程序和脚本动态地...
《jQuery动态创建表格生成器代码详解》 在Web开发中，动态生成表格是常见的需求，尤其是在数据展示和交互性较强的应用场景中。jQuery作为一个轻量级的JavaScript库，以其简洁的API和强大的功能深受开发者喜爱。本文...
在HTML中，`<table>`元素用于创建表格，而动态操作表格行通常涉及到DOM（Document Object Model）的操作。JavaScript提供了对DOM的访问和修改能力，让我们能够动态地添加、删除或修改表格元素。 1. **添加表格行**...
本文介绍了如何在JSF页面中使用JavaScript动态创建表格，并提供了详细的示例代码。通过这种方式，可以根据用户的操作实时更新表格内容，极大地提高了Web应用的灵活性和可用性。此外，还讨论了如何添加更复杂的表单...