`
wasw100
  • 浏览: 127356 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

解决ie6 ie7中js不能通过appendChild("tr")添加table行的方法

阅读更多

本机只有ie7,ff3.5,opera10,测试在这三个环境中测试通过。

 

在标准DOM中添加元素一般使用appendChild();
但用js在table中添加行时却失效了。


网上搜了一下说 ie6,ie7不支持table.appendChild("tr")

那在JavaScript中怎么在一个table中添加一行呢?
http://www.w3schools.com/htmldom/dom_obj_table.asp看到w3c文档中HTML DOM Object存在tableObject.insertRow(index)方法。何不在插入行时用这个方法呢,毕竟在html中table比普通的标签有其特殊性,碰到table添加一行时,注意使用insertRow而不是appendChild,这样代码才能使用更多浏览器。看下面一段代码:

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript">
		function insRow()
		{
			var tbl = document.getElementById('myTable');
			var row = tbl.insertRow(0);
			var cell = row.insertCell(0);
			cell.innerHTML="new cell";
		}
</script>
	</head>

	<body>
		<table id="myTable" border="1">
			<tr>
				<td>
					cell
				</td>
			</tr>
		</table>
		<br />
		<input type="button" onclick="insRow()" value="Insert row">
	</body>
</html>

 

比使用标准的DOM还简单,而且也符合w3c标准,但有一点要说明的是:

innerHTML这个方法虽然没有在w3c文档中出现,但是由于使用的广泛性,很多浏览器都进行了支持,添加文本节点(text nodes)时可以用innerHTML,如果非要符合w3c标准,可以用createTextNode(str)方法,本例中在JavaScript最后一行改为:cell.appendChild(document.createTextNode("new cell"))。

 

但是上面的例子还有一个与appendChild()不同的地方,就是appendChild值插在原有元素的后面,但是例子中是插在了第一行。怎么插在表格的最后一行,或者插在当前行的后一行或者前一行怎么做呢?
只要实例中把javascript改为:var row = tbl.insertRow(tbl.rows.length);

 

 

下面附加一段带有 在最后加一行,本行前前加一行,本行后加一行,删除当前行的html代码

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/htmt;charset=utf-8">
		<script type="text/javascript">
		var i=0;
		function insRow(){
			var tbl = document.getElementById("myTable");
			insRowIndex(tbl.rows.length);
		}
		function insRowIndex(rowIndex){
			var tbl = document.getElementById("myTable");
			var row = tbl.insertRow(rowIndex);
			var cell0 = row.insertCell(0);
			var cell1 = row.insertCell(1);
			cell0.innerHTML = "cell " + i++;
			cell1.innerHTML = "	<input type='button' value='delete' onclick='delRow(this)'>"
								+"<input type='button' value='insBefore' onclick='insBefore(this)'>"
								+"<input type='button' value='insAfter' onclick='insAfter(this)'>";
		}
		function delRow(row){
			var tbl = document.getElementById("myTable");
			var rowIndex =  row.parentNode.parentNode.rowIndex;
			tbl.deleteRow(rowIndex);
		}
		function insBefore(row){
			var rowIndex =  row.parentNode.parentNode.rowIndex;
			insRowIndex(rowIndex)
		}
		function insAfter(row){
			var rowIndex =  row.parentNode.parentNode.rowIndex;
			insRowIndex(rowIndex+1)
		}
</script>
	</head>

	<body>
		<table id="myTable" border="1">
			<tr>
				<td>
					单元格
				</td>
				<td>
					操作
				</td>
			</tr>
		</table>
		<br />
		<input type="button" onclick="insRow()" value="Insert row">
	</body>
</html>

 

分享到:
评论
1 楼 seven_cuit 2009-09-22  
学习了,谢谢楼主

相关推荐

    IE 不兼容的几个js问题及解决方法

    在使用JavaScript动态创建`&lt;table&gt;`元素并添加行(`&lt;tr&gt;`)或单元格(`&lt;td&gt;`)时,直接使用`document.createElement()`结合`appendChild()`可能无法在Internet Explorer(IE)中正确显示。 **解决方法:** 为了确保...

    table动态添加行并编辑

    3. 添加单元格:对新行使用`appendChild`或`insertBefore`方法添加`&lt;td&gt;`单元格元素,填充数据。 4. 插入到表格:将新行插入到表格的适当位置,例如`tableBody.appendChild(newRow)`,其中`tableBody`是`&lt;tbody&gt;`...

    jquery appen table 问题 ie8下解决方法

    - 动态创建表格结构:使用`document.createElement()`函数创建`&lt;tr&gt;`、`&lt;td&gt;`等元素,并通过`.appendChild()`方法将它们添加到正确的父元素中。 - 使用jQuery的`$(element).html()`:在IE8中,有时直接用字符串...

    解决ie6 select的title不能显示的问题

    本文将针对一个特定的问题——如何在Internet Explorer 6(IE6)中使`select`元素的`title`属性能够正常显示——进行详细解析,并提供一种通过JavaScript来实现解决方案的方法。 #### 问题背景 在IE6中,当用户...

    JavaScript Table行定位效果

    第一个问题是fixed的tr在ie7中不能进行定位,而且td在定位后并不能保持在表格中的布局,这样在原表格插tr就没意义了。 ps:fixed的相关应用可参考仿LightBox效果。 最后我用的方法是新建一个table,并把源tr克隆到...

    javascript动态添加表格数据行

    在JavaScript编程中,动态添加表格数据行是一种常见的需求,特别是在构建交互式的Web应用程序时。这个功能允许用户在不刷新整个页面的情况下添加新的记录,提高了用户体验。在这个例子中,我们将探讨如何利用...

    JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐) .zip

    在JavaScript中,读取XML文件并将其数据展示在HTML表格(table)中是一项常见的任务,尤其是在处理前后端分离或者在不使用服务器端语言的情况下。这个压缩包中的资源可能包括一个或多个示例文件,用于演示如何实现这...

    IE6/7/8/9中Table/Select的innerHTML不能赋值的解决方法

    其中一个经典的问题就是尝试使用JavaScript的innerHTML属性来修改表格(Table)或选择列表(Select)的内容,但在IE6、7、8、9版本中,这可能会遇到一些挑战。innerHTML属性通常用于设置或获取元素的HTML内容,但在...

    IE6-IE9不支持table[removed]的解决方法分享

    总结来说,解决IE6-IE9不支持`table.innerHTML`的问题,需要借助于创建临时元素和操作DOM结构的方法。这个方法不仅适用于`table`元素,也可以扩展到其他不支持`innerHTML`的元素,以实现类似的功能。同时,随着...

    JS导入Excel(IE)

    在这个场景下,"JS导入Excel(IE)"指的是使用JavaScript在Internet Explorer(IE)浏览器中实现Excel文件的导入,并将数据转换成HTML表格。由于IE浏览器不支持现代Web API,如FileReader,所以处理起来相对复杂。 ...

    前段JS开发和DOM兼容问题大全

    9. 对于table标签的操作,IE浏览器不允许对其和tr元素的innerHTML属性赋值,且使用appendChild方法增加一个TR时也可能不起作用。在IE中,可以通过`insertRow`和`insertCell`方法动态添加行和单元格。 二、其他DOM...

    javascript动态操作表格

    在JavaScript中,动态操作表格是一项常见的任务,尤其在构建数据驱动的Web应用时。下面将详细探讨这个主题,包括如何添加、删除、选择表格以及兼容性问题。 首先,让我们从添加表格开始。在HTML中,表格由`&lt;table&gt;`...

    table的td整列拖动交换以及重新排列位置

    可以使用`insertBefore()`或`appendChild()`方法将单元格插入到正确的位置。 6. **边界检查**: 考虑到表格的边界,我们需要在拖动过程中检查是否越界,防止单元格被拖出表格范围。 7. **性能优化**: 为了避免...

    IE6-IE9中tbody的innerHTML不能赋值的解决方法

    在IE6到IE9这四个版本的Internet Explorer浏览器中,存在一个与DOM操作相关的兼容性问题,即不能直接通过`innerHTML`属性来设置`&lt;tbody&gt;`元素的内容。这个问题主要是由于这些旧版本的IE浏览器对HTML标准的支持不完整...

    javascript动态向网页中添加表格实现代码.docx

    ### JavaScript 动态向网页中添加表格实现代码详解 #### 一、背景介绍 在Web开发中,经常需要根据后台返回的数据动态生成HTML元素。其中,动态生成表格是一种常见的需求,尤其是在展示数据列表时。本篇文章将详细...

    javascript 动态创建表格:新增、删除行和单元格.zip

    例如,如果要添加一个新的表格行,我们首先需要获取到`&lt;table&gt;`元素,然后创建一个新的`&lt;tr&gt;`元素,最后使用`appendChild()`将其添加到表格中。 2. `insertRow()`和`insertCell()`:这是专用于表格操作的方法。`...

    开发跨浏览器JavaScript时要注意的问题

    ### 开发跨浏览器JavaScript时要注意的问题 ...通过以上这些方法,可以在开发跨浏览器JavaScript应用时有效地解决兼容性问题。确保代码能够在各种不同的浏览器环境下正常运行是提升用户体验的重要方面之一。

Global site tag (gtag.js) - Google Analytics