最近被一个奇怪的脚本问题困扰了好长时间,今天终于将原因弄清楚了,而且这个经验的确值得总结一下。
insertCell是html里的,appendChild是dom里的,其实两者并没什么关联(我也不知道对不对,暂且就当它是这样吧~),但还是想把它们扯在一起说。
事情是这样的,公司开发有一个下拉框的控件,是根据用户输入的数据实时查询数据库,显示与输入内容相关的数据,类似于C/S下的ComboBox。
将这个控件添加到科室申领系统之后,出现了一些怪事,就是在这个控件的选择项目之后的回调函数里面,返回的数据竟然错位了。由于出错的几部机器都是windows2000,开头还以为是系统的问题。查了好久,最后竟然发现是控件将从数据库取回来的数构造成html时的脚本里出了问题。然后就把这个方法考出来,写了一个单独的html文件,结果发现在我的开发机上和另外一部windows2000机器上返回的结果不一样……再一步一步的查,最后确定是insertCell函数出问题。
今天,我又花了一早上的时间研究这个问题,难道这几个脚本真的跟系统有关?通过查相关资料,一些教程上说,insertCell是将cell插入到row的最后一个子元素后面,原文对insertCell的参数说明如下“The default value is -1, which appends the new cell to the end ofthe cells collection.”照这样看来,应该不会出错呀,每次新增一个cell对象都插入到最后面,这就是我想要的啊,为什么在我的电脑上可以,而有些电脑就不行呢?
于是,继续追查原因,我写了一个html文件,模拟这个运行环境,经过一段时间的测试。终于查明了真相,insertCell函数果然是问题的关键!
原来insertCell并没有像我们所想的那样将cell对象插入到row的最后一个子元素后面,它只是插入到最后一个可见子元素后面而已。其实这样讲,也没有完全正确。因为我发现有一种情况例外,在某个条件下,它确实是插入到最后一个子元素的后面了,也就是说和appendChild一样。
也许这样讲很不好了解,下面帖出我写的html文件的代码~在程序里可以看到把insertCell改为appendChild后就能正常工作了。怀疑insertCell和机器的性能有关系,如果循环执行的时候太慢就会像单步执行那样得到不是自己想要的顺序。而连续执行就不会出错。具体为什么会这样,我也搞不懂……
<tablestyle="width:100%;height:100%;" border="1px"cellpadding="1px" cellspacing="1px">
<tr height="50%">
<td>
<table id="newTbl"style="width:100%;height:100%;" border="1px"cellpadding="1px" cellspacing="1px">
<trid="newTr">
</tr>
</table>
</td>
</tr>
<tr>
<td>
<tablestyle="width:100%;height:100%;" border="0" cellpadding="0"cellspacing="0">
<tr>
<tdstyle="width:200px;" align="center">
<inputtype="button" value="单步insertCell" onclick="tr_insertCell()" />
<br /><br/>
<inputtype="button" value="单步appendChild" onclick="tr_appendChild()" />
<br /><br/>
<inputtype="button" value="连续insertCell" onclick="tr_insertCells()" />
<br /><br/>
<inputtype="button" value="连续appendChild" onclick="tr_appendChilds()" />
<br /><br/>
<inputtype="button" value="重 置" onclick="reset()" />
</td>
<td><textareastyle="height:100%;width:100%;"id="txtResult"></textarea></td>
</tr>
</table>
</td>
</tr>
</table>
<script type="text/javascript"language="javascript">
var i = 1;
function tr_insertCell()
{
var newTr = document.getElementById("newTr");
var td = newTr.insertCell();
td.innerText = i++;
if (i % 3 == 0) td.style.display = "none";
txtResult.value = newTr.innerHTML;
}
function tr_appendChild()
{
var newTr = document.getElementById("newTr");
var td = document.createElement("TD");
newTr.appendChild(td);
td.innerText = i++;
if (i % 3 == 0) td.style.display = "none";
txtResult.value = newTr.innerHTML;
}
function tr_insertCells()
{
for(var j = 0; j < 10; j++)
tr_insertCell();
}
function tr_appendChilds()
{
for(var j = 0; j < 10; j++)
tr_appendChild();
}
function reset()
{
i = 1;
txtResult.value = "";
var newTr = document.getElementById("newTr");
while (newTr.childNodes.length > 0)
newTr.removeChild(newTr.firstChild);
}
</script>
分享到:
相关推荐
而使用appendChild方法增加列,显示结果的先后顺序与程序执行的先后顺序相同 详细可以执行以下代码: 代码如下:<html> [removed]<!– function generatable(){ var tableObje = document.getElementById(...
效果图: 代码: js动态添加表格数据_2.html 代码如下: <...js动态添加表格数据_2 使用insertRow和insertCell方法实现</title> [removed] var mailArr = [ { “title”: “一个c#问题”, “name
本篇文章主要介绍了javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法)需要的朋友可以过来参考下,希望对大家有所帮助
写一个小系统时,需要动态添加表单元素,按自己的实现方法写了这篇教程! 我想各位在很多网站上都看到...3、用appendChild方法,将元素追加到某个标签内容中! TemO.appendChild(newInput); Javascrip核心代码: <sc
用js创建动态表格一些基本语法 avascript 动态创建表格:新增、删除行和单元格 利用js来动态创建表格有两种格式,appendChild()和insertRow、insertCell()。
利用js来动态创建表格有两种格式,appendChild()和insertRow、insertCell()。两种方式其实差不多,但第一种有可能在IE上有问题,所以推荐大家使用第二种方法,看下面的解决和使用方法
利用js来动态创建表格有两种格式,appendChild()和insertRow、insertCell()。两种方式其实差不多,但第一种有可能在IE上有问题,所以推荐大家使用第二种了,直接说吧。
js的日历时间控件 if(typeof Control=="undefined"){Control={}}Control.DatePicker=Class.create({initialize:function(element,options){this.element=$(element);if(dp=this.element.retrieve("datepicker")){dp....
var _td=_tr.insertCell(j); //var _tn=document.createTextNode(i.toString()+j.toString()); var t=document.createElement("input"); t.size=20; _td.appendChild(t); } } myDiv....
Dom基础—创建表格 利用js来动态创建表格有两种格式,appendChild()和insertRow、insertCell()。但第一种有可能在IE上有问题,所以推荐使用第二种。 1、insertRow(index):index从0开始 这个函数将新行添加到index的...
JavaScript权威指南 犀牛书 Chapter 1. Introduction to JavaScript Section 1.1. JavaScript Myths Section 1.2. Versions of JavaScript Section 1.3. Client-Side JavaScript Section 1.4. JavaScript ...
1.浏览器兼容问题: 浏览器兼容性的例子:ie6,ie7对table.appendChild(“tr”)的支持和IE8不一样,用insertRow、insertCell来代替或者为表格添加tbody,然后向tbody中添加tr。FF(FireFox)不支持InnerText,用...
JS部分: 代码如下: function next() { //得到table对象 var oTable = document.getElementById(“table1”); //插入tr var oTr = oTable.insertRow(); //一行tr插入3个td var oTd1 = oTr.insertCell(); var oTd2 = ...
js增加行列.doc oTD = TR . insertCell ( iIndex ) otr=table.insertRow()
本文实例讲述了JS实现向表格中动态添加行的方法。分享给大家供大家参考。具体分析如下: 下面的JS代码通过表格对象的insertRow方法动态向表格的最顶端添加新的行 <!DOCTYPE html> <html> <head> ...
本文实例讲述了JavaScript简单表格编辑功能实现方法。分享给大家供大家参考。具体如下: <html> <head> [removed] function getInnerHTML() { alert(document.getElementById("tr2")[removed])...