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

快乐的2 2009-11-13 01:41:31

请分别执行下面两个网页程序,为什么画出的表格数据不同?是什么原理使得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
。。。应该这个样式的表格数据吧
高手来解答.
马上要工作了，以后问题肯定会多多,让我省点分吧. ^阿门^

...全文

20603 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

Alvesy 2012-01-06

打赏
举报

2楼说的太对了！

wangfeis 2009-11-13

打赏
举报

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;
}
应当这样写就可以了

快乐的2 2009-11-13