js使用for循环写html表

以前使用php写，代码如下：

 1 <h3> 查询结果是:</h3>
 2 <table border="1">
 3     <tr>
 4         <th>序号</th>
 5         <th>商品型号P</th>
 6         <th>商品型号N</th>
 7         <th>M参考型号</th>
 8         <th>Y参考型号</th>
 9         <th>商品类别</th>
10         <th>商品名称</th>
11         <th>商品型式</th>
12         <th>是否完全录入</th>
13         <th>供应商一</th>
14         <th>供应商二</th>
15         <th>供应商三</th>
16         <th>供应商四</th>
17         <th>供应商五</th>
18         <th>供应商六</th>
19 
20     </tr>
21 
22 <?php
23 $i = 0;
24 foreach( $rows as $row ){
25 ?>
26     <!-- 查看留言 -->
27 <tr>
28     <td><?php echo $i;?></td>    
29     <td><?php echo $row['商品型号P'];?></td>
30     <td><?php echo $row['商品型号N'];?></td>
31     <td><?php echo $row['M参考型号'];?></td>
32     <td><?php echo $row['Y参考型号'];?></td>
33     <td><?php echo $row['商品类别'];?></td>
34     <td><?php echo $row['商品名称'];?></td>
35     <td><?php echo $row['商品型式'];?></td>
36     <td><?php echo $row['是否完全录入'];?></td>
37     <td><?php echo $row['供应商一'];?></td>
38     <td><?php echo $row['供应商二'];?></td>
39     <td><?php echo $row['供应商三'];?></td>
40     <td><?php echo $row['供应商四'];?></td>
41     <td><?php echo $row['供应商五'];?></td>
42     <td><?php echo $row['供应商六'];?></td>
43 </tr>        
44 <?php
45 $i++;
46 }
47 ?>
48 </table>

现在正在学JS，使用js写，如下：

 1 <body>
 2     <p id="hang"></p>
 3 <script>
 4     arr = [["1","2","3"],["4","5","6"],["7","8","9"]];
 5 
 6     var str = "";
 7     str += '<table border="1">';
 8     str += '<tr><th>aa</th><th>bb</th><th>cc</th></tr>'
 9 
10     
11     for (x in arr)
12     {
13         str += "<tr>";
14         for (y in arr[x])
15         {
16             str += "<td>" + arr[x][y] + "</td>";
17         }
18         str += "</tr>";
19     }
20     
21     document.getElementById("hang").innerHTML=str;
22 </script>
23 </body>

JS效果如图：

js使用for循环写html表

猜你喜欢