最近在研究 跨浏览器的web前端编码，在网上看到很多关于利用js向表格中追加行的说法，如下方法：
<html>
<head>
<script>
function cs(){
var cell = document.createElement("td").appendChild(document.createTextNode("foo"));
var row = document.createElement("tr").appendChild(cell);
document.getElementById("myTableBody").appendChild(row);
}
</script>
</head>
<body>
<a href="javascript:void(0);" onclick="javascript:cs();return false;">追加</a>
<table id="myTable" border="1">
<tbody id="myTableBody"></tbody>
</table>
</body>
</html>
他们说该方法在所有浏览器中都是可以用的，可是我在IE（7、8）中测试却是追加不上，其他浏览器是可以的。利用下面方法却是可以：
function cs(){
var row = document.createElement("tr");
var cell = document.createElement("td");
var foo = document.createTextNode("foo");
cell.appendChild(foo);
row.appendChild(cell);
document.getElementById("myTableBody").appendChild(row);
}
这个方法支持各个浏览器。但是代码有些啰嗦。如果各位有更好的方法 可以交流推荐一下啊。
分享到：
相关推荐
本篇文章通过一个简单的实例，展示了如何使用JavaScript实现表格行上下移动的操作，涉及到了对页面元素节点及属性的操作技巧。 首先，我们来看一个简单的表格示例，它包含了几个表格行（`<tr>`）和单元格（`<td>`）...
在开发跨浏览器的JavaScript应用程序时，确保代码兼容不同的浏览器是非常重要的。以下是一些常见的注意事项，有助于优化JavaScript在不同浏览器之间的兼容性。 一、向表追加行 在JavaScript中向HTML表格添加行时，...
在现代浏览器中，可以通过`document.createElement`和`document.appendChild`方法轻松地向表格中追加行。例如： ```javascript var table = document.getElementById('myTable'); var row = document....
`WebCalendar.js`可能是用于处理日期选择或日历功能的JavaScript文件，但与动态表格的创建直接关系不大。`fp.sql`可能是数据库脚本，用于创建或填充数据。`App_Code`目录通常用于存放自定义的类库代码，而`App_Data`...
标题所指的知识点是关于如何在JavaScript中动态地向HTML表格添加行（TR）和单元格（TD）。在网页编程中，这是一项基础而重要的技能，因为表格经常用于以结构化的方式展示数据。通过JavaScript动态添加表格行和单元格...
★使用本控件开发的网站，网页上表格行的插入、追加、删除、修改、上下移动、拷贝、粘贴等操作，能够立即在浏览器客户端完成，操作按钮在上图表格的左下部。 ★提交后的数据为一个DataTable。用户可使用...
因此，为了保证代码的跨浏览器兼容性，可以使用 `insertRow(-1)` 方法来统一在所有浏览器中向表格的末尾添加行： ```javascript // 向table追加一个空行： var otr = otable.insertRow(-1); var otd = document....
动态生成一个表格是网页编程中常用的技术，主要使用JavaScript来实现。这一技术在很多场景下非常有用，比如在处理数据表格的动态加载、用户交互触发元素生成等情境。在本例中，我们将讲解如何使用按钮触发JavaScript...
1. **动态生成表格**：通过一个`for`循环，使用`append()`方法向id为`mytable`的表格追加`<tr>`行元素，每行包含两个`<td>`单元格。这样就创建了一个10行2列的表格。 ```javascript for (i = 1; i ; i++) { $("#...
它的工作流程与`addOneBk()`类似，不过这里是向`<tbody>`添加一个新的行元素，并且新行的第一个单元格同样是`<th>`，其中包含一个输入框和与增加列相同的逻辑来限制输入值。 3. `deleteLie()`函数用于删除一列。它...
在使用layui框架构建数据表格时，我们经常需要动态地向表格中添加新的行，并且希望这些新添加的行能够具备与原始数据一样的功能，比如单元格的编辑能力。本篇文章将详细讲解如何实现layui点击按钮添加可编辑的一行...
知识点一：JavaScript表格操作的性能瓶颈 在进行JavaScript编程时，对大型HTML表格进行操作可能会遇到性能瓶颈。传统的隐藏表格列方法是通过将单元格的CSS属性`display`设置为`none`，但这种方式在处理大量数据时会...
这种做法确保了文档结构的正确性和一致性，尤其是在处理跨平台和跨浏览器兼容性问题时尤为重要。 #### `options` 参数详解 ##### 基本配置 - **url** (字符串): 该参数用于指定`jqGrid`从何处获取需要显示的数据...
当尝试向HTML表格（`<table>`）追加数据时，通常会遇到浏览器兼容性问题，尤其是对于较旧的浏览器，如Internet Explorer 8（简称IE8）。IE8及以下版本对某些HTML5新特性支持不足，这可能导致`append()`在某些情况下...
• layerlib.js 跨浏览器DHTML库 • 13.12.htm 跨浏览器DHTML库的使用 第14章（\第14章） • 14.1.htm confirm()方法用作判断条件 • 14.2.htm alert()方法与confirm()方法的使用 ...
可以使用任何文本编辑工具编写 JavaScript 代码，然后由浏览器解释执行。 JavaScript常用于实现如下功能： |--控制文档的外观和内容； |--对浏览器的控制； |--与 HTML 表单的交互； |--与用户的交互； |--...
行合并是将一个文件的行追加到另一个文件的末尾；列合并则是将一个文件的列与另一个文件的对应列合并在一起。根据实际需求选择合适的方法。 - 考虑到数据一致性，合并前应检查是否有相同的标识符（如ID），以避免...
该操作包括创建一个表格行（tr），并向其中插入两个单元格（td），第一个单元格中包含一个文件输入控件（input type="file"），第二个单元格中包含一个删除按钮（input type="button"）。删除按钮绑定了点击事件，当...
• layerlib.js 跨浏览器DHTML库 • 13.12.htm 跨浏览器DHTML库的使用 第14章（\第14章） • 14.1.htm confirm()方法用作判断条件 • 14.2.htm alert()方法与confirm()方法的使用 • 14.3....