Javascript 在表中正确对齐循环数据？_Javascript_Html_For Loop_Html Table_Alignment

Javascript 在表中正确对齐循环数据？

javascript html for-loop

Javascript 在表中正确对齐循环数据？,javascript,html,for-loop,html-table,alignment,Javascript,Html,For Loop,Html Table,Alignment,我正在练习。我知道如何进行循环，但我无法正确对齐数据 <html lang = "en"> <head> <title>Javascript practice</title> <link rel ="stylesheet" href = "css/foundation.min.css"></link> <style type = "text/css">

我正在练习。我知道如何进行循环，但我无法正确对齐数据

<html lang = "en">

    <head>
        <title>Javascript practice</title>
        <link rel ="stylesheet" href = "css/foundation.min.css"></link>

        <style type = "text/css">
         table         { width: 300px;
                         border-collapse:collapse; 
                         background-color: lightblue; }
         table, td, th { border: 1px solid black; 
                         padding: 4px; }
         th            { text-align: left; 
                         color: white;
                         background-color: darkblue; }
         tr.oddrow     { background-color: white; }
      </style>
    </head>


    <body>



        <! -- JavaScript -->
        <script type = "text/javascript">

            var ALEast   =  ["Yankees", "Red Sox", "Orioles", "Rays", "Blue-Jays"];


            var count = 1;

            document.write('<table border = "3">');


            document.write('<thead style = "height:100px;"><tr><th>N</th><th>10*N</th><th>100*N</th><th>1000*N</th></thead>');








            for(var i = 0; i < ALEast.length; i++)
                {

                    document.write('<tr><td>' + ALEast[i] + '</td></tr>');

                }   

            for(var count = 1; count <= 6; count++)
                {
                    document.write('<tr><tr><td><td>' + count + '</tr><</td></td>');
                }


        document.write('</table>');



        </script>
        <!-- End JavaScript -->


    </body>
</html>


Javascript实践
表{宽度：300px；
边界塌陷：塌陷；
背景色：浅蓝色；}
表，td，th{边框：1px纯黑色；
填充：4px；}
th{文本对齐：左；
颜色：白色；
背景色：暗蓝色；}
tr.oddrow{背景色：白色；}
var ALEast=[“洋基队”、“红袜队”、“金莺队”、“射线队”、“蓝鸟队”]；
var计数=1；
文件。写（“”）；
文件写入（'N10*N100*N1000*N'）；
对于（var i=0；i嗯，您的代码中有一些错误，还有一些缺少结束标记，所以我检查了您的代码，然后修复了错误
<head>
    <title>Javascript practice</title>
    <link rel ="stylesheet" href = "css/foundation.min.css"></link>

    <style type = "text/css">
     table         { width: 300px;
                     border-collapse:collapse; 
                     background-color: lightblue; }
     table, td, th { border: 1px solid black; 
                     padding: 4px; }
     th            { text-align: left; 
                     color: white;
                     background-color: darkblue; }
     tr.oddrow     { background-color: white; }
  </style>
</head>


<body>



    <! -- JavaScript -->
    <script type = "text/javascript">

        var ALEast   =  ["Yankees", "Red Sox", "Orioles", "Rays", "Blue-Jays"];


        var count = 1;

        document.write('<table border = "3">');


        document.write('<thead style = "height:100px;"><tr><th>N</th><th>10*N</th><th>100*N</th><th>1000*N</th></tr></thead>');




        for(var i = 0; i < ALEast.length; i++)
            {

                document.write('<tr><td>' + ALEast[i] + '</td><td>'+ i +'</td></tr>');

            }   


    document.write('</table>');



    </script>
    <!-- End JavaScript -->


</body>



Javascript实践
表{宽度：300px；
边界塌陷：塌陷；
背景色：浅蓝色；}
表，td，th{边框：1px纯黑色；
填充：4px；}
th{文本对齐：左；
颜色：白色；
背景色：暗蓝色；}
tr.oddrow{背景色：白色；}
var ALEast=[“洋基队”、“红袜队”、“金莺队”、“射线队”、“蓝鸟队”]；
var计数=1；
文件。写（“”）；
文件写入（'N10*N100*N1000*N'）；
对于（var i=0；i

问题不在于JavaScript，而在于您对表、tr和td
的理解。您还有一个double您在第一个循环中有一列，没有colspan。一个tr元素是一行。因此它必须包含与标题（th）一样多的td元素。而且，您不能在另一个tr中包含tr（在第二个循环中）。整理html部分和js会容易得多。您的代码中有一些错误（不确定它们是否只是因为键入错误而丢失）。据我所知，您需要打印一个包含两列的表？现在我只希望我的计数循环（打印数字1到6）出现在第二列“10*N”下.目前，我的计数循环出现在第一列棒球队的下方。谢谢，但我运行了您的修复程序，仍然无法使我的计数循环出现在第二列的“10*N”下我不知道该怎么做。谢谢你。我知道如何把我的迭代放在表中。谢谢。如果可以的话，我会给你投票的，但是我没有足够的代表。这只是一个作业的练习，所以我不能手动将数字1到6放在第二列，我需要通过for循环进行迭代。棒球的东西是随机的，不可重复的我相信第一列将有1到6，通过迭代，第二列有10到60，通过迭代，第三列有100到600，通过迭代（对于循环）.我们上面的逻辑可能吗？@user3577397所以，你希望第一列有6行，从数字1到数字6，第二列有51行，从数字10到数字60，等等…？不，我真的弄明白了。分配要求我有N列=1，2，3，4，5，6；下一列是=10*N=10，20，30，40，50，60；下一列超过=100*N=100200300400500600；下一列超过=1000*N=10002000300400050006000；我们应该通过一个For循环来填写这个表。在这里，我可以在每个人的帮助下完成。循环并不难，它是在表中组织的。@user3577397啊，很好：-）
Line #01: <table>
Line #02: <thead style = "height:100px;"><tr><th>N</th><th>10*N</th><th>100*N</th><th>1000*N</th></thead>
Line #03: <tr><td>' + ALEast[0] + '</td></tr>
Line #04: <tr><td>' + ALEast[1] + '</td></tr>
Line #05: <tr><td>' + ALEast[2] + '</td></tr>
Line #06: <tr><tr><td><td>1</tr><</td></td>
Line #07: <tr><tr><td><td>2</tr><</td></td>
Line #08: <tr><tr><td><td>3</tr><</td></td>
Line #09: <tr><tr><td><td>4</tr><</td></td>
Line #10: <tr><tr><td><td>5</tr><</td></td>
Line #11: <tr><tr><td><td>6</tr><</td></td>
Line #12: </table>