生成一个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>
1、inserRow()和insertCell()函数
insertRow()函数可以带参数，形式如下：
insertRow(index)
这个函数将新行添加到index的那一行前，比如insertRow(0),是将新行添加到第一行之前。默认的insertRow()函数相当于insertRow(-1),将新行添加到表的最后。
insertCell()和insertRow的用法相同。
2、动态设置属性和事件
上面的innerHTML和innerText都是列的属性。
innerText是添加到<tb></tb>之间的文本，innerHTML是添加到<tb></tb>之间的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 = "newClick";
上面的写法都是错误的。
下面的写法，也是正确的
newTr.onclick = function newClick(){
alert("这是新添加的行");
｝
原文：http://abaper.blogbus.com/logs/8278500.html
动态删除表格
方法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>
分享到：
相关推荐
JavaScript 动态创建表格知识点总结 JavaScript 动态创建表格是指使用 JavaScript 语言来动态地创建和修改 HTML 表格的行和单元格。这种技术非常有用，特别是在需要频繁地更新表格数据的情况下。 动态创建表格的两...
在网页开发中，动态创建和删除表格是一种常见的需求，特别是在数据展示和用户交互场景下。jQuery库因其简洁的API和强大的DOM操作能力，被广泛用于此类任务。本篇将深入探讨如何使用jQuery来动态实现表格的创建和删除...
这篇博客"JavaScript动态添加删除表格行"可能详细讲解了如何使用JavaScript实现这一功能。通过给定的标签"源码"和"工具"，我们可以推测这篇文章会包含实际的代码示例和实用方法。 在HTML中，`<table>`元素用于创建...
在JavaScript中，动态添加和删除表格是常见的网页交互功能，主要应用于数据展示、表单处理等场景。这篇博文通过一个简单的实例，展示了如何利用JavaScript实现这个功能。在讲解之前，我们先了解一下HTML表格的基本...
本文将深入探讨如何使用JavaScript动态地增加和删除表格行。 首先，我们来了解一下HTML表格的基本结构。一个表格由`<table>`元素包含，其中包含`<tr>`（表格行）元素，每行内可以有多个`<td>`（表格数据单元格）或`...
JavaScript 动态创建 Table 表格和节点操作 根据提供的文件信息，我们可以总结出以下知识点： 1. 节点操作 在 HTML 文档中，所有内容都是节点，包括文档节点、元素节点、文本节点、属性节点和注释节点。节点操作...
总结来说，使用JavaScript动态创建和管理表格是一种非常实用且强大的功能，可以帮助开发者根据用户的需求实时调整表格结构。通过上述方法的介绍，你可以更灵活地控制表格的显示效果，提高用户体验。
总结来说，JavaScript动态创建和操作表格的核心在于理解`insertRow()`、`insertCell()`、`deleteRow()`和`deleteCell()`方法的使用，以及如何灵活地设置表格和单元格的属性。在实际应用中，要注意浏览器兼容性问题，...
总的来说，JavaScript提供了强大的DOM操作能力，使得我们可以灵活地控制网页中的HTML元素，包括动态创建和删除表格。在实际项目中，结合CSS和Ajax，可以实现更丰富的表格功能，如排序、过滤和分页等。
总结来说，这个压缩包提供的知识涵盖了JavaScript动态创建和操作HTML表格的基本技巧，对于想要提升网页交互性的开发者尤其有用。通过学习和实践这些方法，你可以创建出更具活力和用户友好的网页应用。
以上就是JavaScript动态操作表格的基本方法。实际应用中，可能还需要考虑到事件监听、异步数据加载等情况。通过熟练掌握这些技巧，你可以创建出交互性强、功能丰富的表格应用。记住，实践是检验理论的最好方式，尝试...
使用jQuery，我们可以动态创建表格元素。例如，创建一个带有表头的表格： ```javascript var table = $('<table></table>'); var thead = $('<thead></thead>'); var tr = $('<tr></tr>'); // 添加表头...
总的来说，JavaScript动态操作表格涉及创建、删除、选择和更新表格元素，这些都需要对DOM有深入理解。在实际应用中，还要考虑浏览器兼容性，特别是对于较旧的浏览器，如IE6和早期的Firefox版本。通过合理使用...
- **动态数据加载**：如果你的数据来源于服务器，可以使用AJAX请求获取数据，然后动态创建表格。 - **表单验证**：对于输入框，你可能需要验证用户输入的数据格式是否正确。 - **交互功能**：例如，添加删除行、添加...
实现页面创建表格，和删除指定列、行单元格功能。利用JavaScript动态创建表格，可根据用户的使用需求动态添加指定列数、行数，删除指定列数、行数。删除成功或不成功时，会反馈给用户一个弹框提示，增强用户体验感。
在JavaScript编程中，动态添加表格数据行是一种常见的需求，特别是在构建交互式的Web应用程序时。这个功能允许用户在不刷新整个页面的情况下添加新的记录，提高了用户体验。在这个例子中，我们将探讨如何利用...
本文介绍了如何在JSF页面中使用JavaScript动态创建表格，并提供了详细的示例代码。通过这种方式，可以根据用户的操作实时更新表格内容，极大地提高了Web应用的灵活性和可用性。此外，还讨论了如何添加更复杂的表单...
本文将详细介绍两种JavaScript动态创建table表格的方法。 方法一：最原始的方法，通过`createElement()`函数逐个创建元素。这种方法需要手动构建表格的结构，包括`<table>`、`<tbody>`、`<tr>`和`<td>`等元素。例如...
在JavaScript编程中，动态表格是一种常见的交互式网页元素，它允许用户在运行时添加、删除、检查和修改数据。这种功能对于数据展示和管理尤为重要，特别是在Web应用中处理大量结构化信息时。以下是对"js 动态表格 增...