JS的for循环for(var i=0;...)与for(var tmp in data)两个循环的区别？

请分别执行下面两个网页程序,为什么画出的表格数据不同?是什么原理使得for in循环(createRow函数的)所获取到的data数据没有更新?可以正常显示的代码<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>dbEditor.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
function addData(){
var data_table = document.getElementById("data_Table");
var test = document.getElementById("test");
for(var i=0; i<10; i++){
var data = new Array();
for(var j=0; j< 5; j++){
data[j] = i+""+j;
//test.innerHTML+=data[j]+",";  //测试数据用的
}
test.innerHTML+="<BR>";
var row = createRow(data);
data_table.appendChild(row);
}
}

function createRow(data){
var row = document.createElement("tr");
for(var i=0; i<data.length;i++){
var col = document.createElement("td");
var node = document.createTextNode(data[i]);
col.appendChild(node);
row.appendChild(col);
}
return row;
}
</script>
  </head>
  
  <body onload="addData()">
    <form name="f1" id="f1" action="" method="post">
      <table border="1" bordercolor="red" cellspacing="0" cellpadding="0" align="center">
       <tr>
       <td><div id="test"></div></td>
       </tr>
        <tr>
          <td>SQL_CODE:</td>
          <td><textarea name="code" rows="10" cols="50"></textarea></td>
        </tr>
        <tr>
          <td colspan="2" align="center"><input type="submit" value="Execute" onClick=""></td>
        </tr>
        <tr>
         <td colspan="2" width="100%" height="100%">
         <table width="100%" height="100%">
         <tbody id="data_Table"></tbody>
         </table>
         </td>
        </tr>
      </table>
    </form>
  </body>
</html>显示数据不正常的<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>dbEditor.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="dwr/engine.js"></script>
    <script type="text/javascript" src="dwr/util.js"></script>
    <script type="text/javascript" src="dwr/DBEditor.js"></script>
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
function addData(){
var data_table = document.getElementById("data_Table");
var test = document.getElementById("test");
for(var i=0; i<10; i++){
var data = new Array();
for(var j=0; j< 5; j++){
data[j] = i+""+j;
//test.innerHTML+=data[j]+","; //测试数据使用这段
}
//test.innerHTML+="<BR>";
var row = createRow(data);
data_table.appendChild(row);
}
}

function createRow(data){
var row = document.createElement("tr");
for(var tmp in data){   //这里是两个文件的区别之处(循环方式不同)
var col = document.createElement("td");
var node = document.createTextNode(tmp);
col.appendChild(node);
row.appendChild(col);
}
return row;
}
</script>
  </head>
  
  <body onload="addData()">
    <form name="f1" id="f1" action="" method="post">
      <table border="1" bordercolor="red" cellspacing="0" cellpadding="0" align="center">
       <tr>
       <td><div id="test"></div></td>
       </tr>
        <tr>
          <td>SQL_CODE:</td>
          <td><textarea name="code" rows="10" cols="50"></textarea></td>
        </tr>
        <tr>
          <td colspan="2" align="center"><input type="submit" value="Execute" onClick=""></td>
        </tr>
        <tr>
         <td colspan="2" width="100%" height="100%">
         <table width="100%" height="100%">
         <tbody id="data_Table"></tbody>
         </table>
         </td>
        </tr>
      </table>
    </form>
  </body>
</html>
我知道for in循环取数的时候是null的不取,这个与正常的for循环有点区别.
但是为什么这个页面里使用for in循环所取到的数都是相同的呢?

想要达到的效果:
自动添加的表格如下：
00 01 02 03 04
10 11 12 13 14
20 21 22 23 24
.....使用for in循环添加的row结果是
0 1 2 3 4
0 1 2 3 4
0 1 2 3 4
0 1 2 3 4
...
至于这个数是整形的我还能理解，但是为什么数据都是一样的呢？假如它自动转型那应该是
0 1 2 3 4
10 11 12 13 14
20 21 22 23 24
应该这个样式的表格数据吧
高手来解答.
马上要工作了，以后问题肯定会多多,让我省点分吧.  ^阿门^

解决方案 »

  1.   

    代码比较多,其实都是重复的,只要看两个页面的createRow那个函数就可以了.两个页面之间只有那里不同
      

  2.   

    function createRow(data){
        var row = document.createElement("tr");             
        for(var tmp in data){  
             var col = document.createElement("td");
             var node = document.createTextNode(data[tmp]);//与你代码区别之处
             col.appendChild(node);
             row.appendChild(col);
        }
        return row;
    }
    应当这样写就可以了