周其洋
最新更新的文章列表
精彩推荐列表
发表文章
2008-04-10 js里的insertCell和appendChild的区别
2008-04-10 14:26:20.0
    最近被一个奇怪的脚本问题困扰了好长时间，今天终于将原因弄清楚了，而且这个经验的确值得总结一下。
    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 of the cells collection.”照这样看来，应该不会出错呀，每次新增一个cell对象都插入到最后面，这就是我想要的啊，为什么在我的电脑上可以，而有些电脑就不行呢？
    于是，继续追查原因，我写了一个html文件，模拟这个运行环境，经过一段时间的测试。终于查明了真相，insertCell函数果然是问题的关键！
    原来insertCell并没有像我们所想的那样将cell对象插入到row的最后一个子元素后面，它只是插入到最后一个可见子元素后面而已。其实这样讲，也没有完全正确。因为我发现有一种情况例外，在某个条件下，它确实是插入到最后一个子元素的后面了，也就是说和appendChild一样。
    也许这样讲很不好了解，下面帖出我写的html文件的代码~在程序里可以看到把insertCell改为appendChild后就能正常工作了。怀疑insertCell和机器的性能有关系，如果循环执行的时候太慢就会像单步执行那样得到不是自己想要的顺序。而连续执行就不会出错。具体为什么会这样，我也搞不懂……
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<table style="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">
                   <tr id="newTr">
                   </tr>
              </table>
         </td>
     </tr>
     <tr>
         <td>
              <table style="width:100%;height:100%;" border="0" cellpadding="0" cellspacing="0">
                   <tr>
                       <td style="width:200px;" align="center">
                            <input type="button" value="单步insertCell" onclick="tr_insertCell()" />
                            <br /><br />
                            <input type="button" value="单步appendChild" onclick="tr_appendChild()" />
                            <br /><br />
                            <input type="button" value="连续insertCell" onclick="tr_insertCells()" />
                            <br /><br />
                            <input type="button" value="连续appendChild" onclick="tr_appendChilds()" />
                            <br /><br />
                            <input type="button" value="重   置" onclick="reset()" />
                       </td>
                        <td><textarea style="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>

文章评论
[以下网友留言只代表其个人观点，不代表中华网的观点或立场]
发表评论
昵 称：
主 页：
内 容：
表 情：
 
 
= "/replyAction.do?method=addReply"; submit(); } } function chkAdd() { var usernameValue = document.getElementById('username').value; if (usernameValue == null || usernameValue == '') { click = 0; _error_msg_show('你忘记填写昵称了:S'); return false; } else if (hasSymbol(usernameValue)) { _error_msg_show('昵称不能包含特殊字符'); return false; } else if (getLength(usernameValue) < 1 || getLength(usernameValue) > 60) { click = 0; _error_msg_show('昵称太长，必须小于60个字符'); return false; } var userurlValue = document.getElementById('userurl').value; if (getLength(userurlValue) > 50) { click = 0; _error_msg_show('主页太长，必须小于50个字符'); return false; } var contentValue = document.getElementById('content').value; if (contentValue == null || contentValue == '') { click = 0; _error_msg_show('你忘记填写评论内容了:S'); return false; } else if (getLength(contentValue) < 1 || getLength(contentValue) > 900) { click = 0; _error_msg_show('评论内容太长，必须小于900个字符'); return false; } return true; } function getLength(str) { var num = str.replace(/[^\x00-\xff]/g, "**").length; return num; } function getImage() { Intro.style.display = "block"; var ichina = document.URL.indexOf("china.com"); if (ichina < 0) { window.location.href = "http://blog.china.com"; } document.getElementById("c_codeInputBox").innerHTML = " 看不清验证码？"; } function ubbTag(target, markup) { var txa = document.getElementsByName(target)[0]; txa.value += markup; }
周其洋
最新更新的文章列表
精彩推荐列表
发表文章
2008-04-10 js里的insertCell和appendChild的区别
2008-04-10 14:26:20.0
    最近被一个奇怪的脚本问题困扰了好长时间，今天终于将原因弄清楚了，而且这个经验的确值得总结一下。
    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 of the cells collection.”照这样看来，应该不会出错呀，每次新增一个cell对象都插入到最后面，这就是我想要的啊，为什么在我的电脑上可以，而有些电脑就不行呢？
    于是，继续追查原因，我写了一个html文件，模拟这个运行环境，经过一段时间的测试。终于查明了真相，insertCell函数果然是问题的关键！
    原来insertCell并没有像我们所想的那样将cell对象插入到row的最后一个子元素后面，它只是插入到最后一个可见子元素后面而已。其实这样讲，也没有完全正确。因为我发现有一种情况例外，在某个条件下，它确实是插入到最后一个子元素的后面了，也就是说和appendChild一样。
    也许这样讲很不好了解，下面帖出我写的html文件的代码~在程序里可以看到把insertCell改为appendChild后就能正常工作了。怀疑insertCell和机器的性能有关系，如果循环执行的时候太慢就会像单步执行那样得到不是自己想要的顺序。而连续执行就不会出错。具体为什么会这样，我也搞不懂……
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<table style="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">
                   <tr id="newTr">
                   </tr>
              </table>
         </td>
     </tr>
     <tr>
         <td>
              <table style="width:100%;height:100%;" border="0" cellpadding="0" cellspacing="0">
                   <tr>
                       <td style="width:200px;" align="center">
                            <input type="button" value="单步insertCell" onclick="tr_insertCell()" />
                            <br /><br />
                            <input type="button" value="单步appendChild" onclick="tr_appendChild()" />
                            <br /><br />
                            <input type="button" value="连续insertCell" onclick="tr_insertCells()" />
                            <br /><br />
                            <input type="button" value="连续appendChild" onclick="tr_appendChilds()" />
                            <br /><br />
                            <input type="button" value="重   置" onclick="reset()" />
                       </td>
                        <td><textarea style="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>

文章评论
[以下网友留言只代表其个人观点，不代表中华网的观点或立场]
发表评论
昵 称：
主 页：
内 容：
表 情：
验证码：
 
 
= "/replyAction.do?method=addReply"; submit(); } } function chkAdd() { var usernameValue = document.getElementById('username').value; if (usernameValue == null || usernameValue == '') { click = 0; _error_msg_show('你忘记填写昵称了:S'); return false; } else if (hasSymbol(usernameValue)) { _error_msg_show('昵称不能包含特殊字符'); return false; } else if (getLength(usernameValue) < 1 || getLength(usernameValue) > 60) { click = 0; _error_msg_show('昵称太长，必须小于60个字符'); return false; } var userurlValue = document.getElementById('userurl').value; if (getLength(userurlValue) > 50) { click = 0; _error_msg_show('主页太长，必须小于50个字符'); return false; } var contentValue = document.getElementById('content').value; if (contentValue == null || contentValue == '') { click = 0; _error_msg_show('你忘记填写评论内容了:S'); return false; } else if (getLength(contentValue) < 1 || getLength(contentValue) > 900) { click = 0; _error_msg_show('评论内容太长，必须小于900个字符'); return false; } return true; } function getLength(str) { var num = str.replace(/[^\x00-\xff]/g, "**").length; return num; } function getImage() { Intro.style.display = "block"; var ichina = document.URL.indexOf("china.com"); if (ichina < 0) { window.location.href = "http://blog.china.com"; } document.getElementById("c_codeInputBox").innerHTML = " 看不清验证码？"; } function ubbTag(target, markup) { var txa = document.getElementsByName(target)[0]; txa.value += markup; }
周其洋
最新更新的文章列表
精彩推荐列表
发表文章
2008-04-10 js里的insertCell和appendChild的区别
2008-04-10 14:26:20.0
    最近被一个奇怪的脚本问题困扰了好长时间，今天终于将原因弄清楚了，而且这个经验的确值得总结一下。
    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 of the cells collection.”照这样看来，应该不会出错呀，每次新增一个cell对象都插入到最后面，这就是我想要的啊，为什么在我的电脑上可以，而有些电脑就不行呢？
    于是，继续追查原因，我写了一个html文件，模拟这个运行环境，经过一段时间的测试。终于查明了真相，insertCell函数果然是问题的关键！
    原来insertCell并没有像我们所想的那样将cell对象插入到row的最后一个子元素后面，它只是插入到最后一个可见子元素后面而已。其实这样讲，也没有完全正确。因为我发现有一种情况例外，在某个条件下，它确实是插入到最后一个子元素的后面了，也就是说和appendChild一样。
    也许这样讲很不好了解，下面帖出我写的html文件的代码~在程序里可以看到把insertCell改为appendChild后就能正常工作了。怀疑insertCell和机器的性能有关系，如果循环执行的时候太慢就会像单步执行那样得到不是自己想要的顺序。而连续执行就不会出错。具体为什么会这样，我也搞不懂……
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<table style="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">
                   <tr id="newTr">
                   </tr>
              </table>
         </td>
     </tr>
     <tr>
         <td>
              <table style="width:100%;height:100%;" border="0" cellpadding="0" cellspacing="0">
                   <tr>
                       <td style="width:200px;" align="center">
                            <input type="button" value="单步insertCell" onclick="tr_insertCell()" />
                            <br /><br />
                            <input type="button" value="单步appendChild" onclick="tr_appendChild()" />
                            <br /><br />
                            <input type="button" value="连续insertCell" onclick="tr_insertCells()" />
                            <br /><br />
                            <input type="button" value="连续appendChild" onclick="tr_appendChilds()" />
                            <br /><br />
                            <input type="button" value="重   置" onclick="reset()" />
                       </td>
                        <td><textarea style="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>

文章评论
[以下网友留言只代表其个人观点，不代表中华网的观点或立场]
发表评论
昵 称：
主 页：
内 容：
表 情：