谷歌浏览器 insertCell与appendChild的区别
更新时间：2009年02月12日 20:22:56 作者：
table中增加单元格时
在谷歌浏览器中使用insertCell方法增加列时，显示结果的先后顺序与程序执行的先后顺序相反
而使用appendChild方法增加列，显示结果的先后顺序与程序执行的先后顺序相同
详细可以执行以下代码：
<html>
<script type="text/javascript"><!--
function generatable(){
var tableObje = document.getElementById("info");
var bodyObj = tableObje.tBodies[0];
var rowObj = bodyObj.insertRow();
var cellObj = rowObj.insertCell();
cellObj.innerHTML = "张三";
cellObj = rowObj.insertCell();
cellObj.innerHTML = "请参阅我编写的其他书目对应的脚本特性为请参阅我编写的其他书目";
cellObj = rowObj.insertCell();
cellObj.innerHTML = "当事人地址信息请小房间也是查看。";
}
function generatable1(){
var tableObje = document.getElementById("info");
var bodyObj = tableObje.tBodies[0];
var rowObj = document.createElement("tr");
var cellObj = document.createElement("td");
cellObj.innerHTML = "张三";
rowObj.appendChild(cellObj)
cellObj = document.createElement("td");
cellObj.innerHTML = "请参阅我编写的其他书目对应的脚本特性为请参阅我编写的其他书目";
rowObj.appendChild(cellObj);
cellObj = document.createElement("td");
cellObj.innerHTML = "当事人地址信息请小房间也是查看。";
rowObj.appendChild(cellObj);
bodyObj.appendChild(rowObj);
}
// --></script>
<body onload="generatable()">
<table width=100 bgcolor=#f3f3f3 id=info border=1 style="table-layout:fixed;" style="table-layout:fixed;">
<thead>
<tr>
<td style="width:80">姓名</td>
<td style="width:200">描述</td>
<td style="width:100">地址</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
详细可以执行以下代码：
复制代码 代码如下:
<html>
<script type="text/javascript"><!--
function generatable(){
var tableObje = document.getElementById("info");
var bodyObj = tableObje.tBodies[0];
var rowObj = bodyObj.insertRow();
var cellObj = rowObj.insertCell();
cellObj.innerHTML = "张三";
cellObj = rowObj.insertCell();
cellObj.innerHTML = "请参阅我编写的其他书目对应的脚本特性为请参阅我编写的其他书目";
cellObj = rowObj.insertCell();
cellObj.innerHTML = "当事人地址信息请小房间也是查看。";
}
function generatable1(){
var tableObje = document.getElementById("info");
var bodyObj = tableObje.tBodies[0];
var rowObj = document.createElement("tr");
var cellObj = document.createElement("td");
cellObj.innerHTML = "张三";
rowObj.appendChild(cellObj)
cellObj = document.createElement("td");
cellObj.innerHTML = "请参阅我编写的其他书目对应的脚本特性为请参阅我编写的其他书目";
rowObj.appendChild(cellObj);
cellObj = document.createElement("td");
cellObj.innerHTML = "当事人地址信息请小房间也是查看。";
rowObj.appendChild(cellObj);
bodyObj.appendChild(rowObj);
}
// --></script>
<body onload="generatable()">
<table width=100 bgcolor=#f3f3f3 id=info border=1 style="table-layout:fixed;" style="table-layout:fixed;">
<thead>
<tr>
<td style="width:80">姓名</td>
<td style="width:200">描述</td>
<td style="width:100">地址</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
相关文章
这篇文章主要介绍了js设置文字颜色的方法,涉及JS页面元素样式操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2016-12-12
上一篇文章中我们使用textarea来模拟AJAX的返回结果，造成了一些误解。 这里我们首先用asp.net的Generic Handler做一个简单的后台来重现这个AJAX过程。2011-03-03
前端的小伙伴大概都知道，js中的var变量存在变量提升，在es6以后随着let变量的出现，变量提升问题得以解决，那么变量提升的原理是什么，es6又是怎么解决变量提升问题的，下面我们来共同探寻答案2023-05-05
这篇文章主要为大家介绍了如何利用JavaScript实现四个常用的排序：插入排序、交换排序、选择排序和归并排序，文中利用动图详细介绍了实现过程，需要的可以参考一下2022-02-02
这篇文章主要介绍了javascript类型系统之Window对象，整理关于Window对象的学习笔记，感兴趣的小伙伴们可以参考一下2016-01-01
javascript对于变量的定义、类型的要求都比较松散，这样既方便，但又容易犯错。有时候进行必要的类型检查是必须的。2010-12-12
这篇文章主要给大家介绍了关于js实现封装jQuery的简单方法与链式操作的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
这篇文章主要为大家详细介绍了如何通过JavaScript实现函数重载，文中的示例代码讲解详细，对我们学习JavaScript有一定的帮助，感兴趣的可以了解一下2023-01-01
本篇文章主要介绍了Jquery把获取到的input值转换成json的相关知识，具有很好的参考价值。下面跟着小编一起来看下吧2017-05-05
这篇文章主要介绍了简单的JavaScript互斥锁的相关资料,需要的朋友可以参考下2014-02-02
最新评论