javascript while()循环创建一行单元格而不是表格

时间:2014-11-23 16:05:10

标签: javascript html while-loop

地球上的任何人都知道为什么这个while循环不能按预期工作吗?

我希望它能够创建一个HTML表格,但它会产生一些奇怪的单元格。

看看.....

var t = "<table>", i = 10 ; //h = 10;

    while(i--> 0) {
        //here was the problem declare the h var here
        var h =10;
        t += "<tr>";
            while (h-->0) {
                t += "<td> "+ h + "</td>";
            }
        t += "</tr>";
    }

    t += "</table>";
    $("body").append($(t));
    html,body {
    margin-top:20px;
    height:100%;
    }

    td {
    border:1px solid black;
    }
<!DOCTYPE html>
<html>
    <head>
        <script  src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <meta charset="utf-8">
            <title>
            JS Bin
            </title>
    </head>
    <body>
    </body>
</html>

1 个答案:

答案 0 :(得分:3)

您不会将h重置为10。转到0 i=9i的第一次迭代)后,它会一直停留在0

在外部循环开始时重置它:

var t="<table>",i=10;
while(i-->0){
  var h = 10;
  t+="<tr>";
  while(h-->0){t+="<td>"+h+"</td>";}
  t+="</tr>";
}
t+="</table>";
$("body").append(t); // no need for $(t) here

在这里使用for语句可能有助于将初始化保持在循环附近,并且不会使程序不那么简洁(看起来像你试图实现的那样):

var t="<table>";
for(var i=10;i--;){
  t+="<tr>";
  for(var h=10;h--;) t+="<td>"+h+"</td>";
  t+="</tr>";
}
t+="</table>";
$("body").append(t);

当你忘记var声明(这是JS程序中的常见错误之一)时,这也很明显。