Question

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

<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>

我想要计数循环，数字1到6直接在我的10 * N标题下面。但我无法在那里得到它。如果你运行我的代码，你会看到它在第二列，但是太低了，而不是直接在“洋基队”的右边。

所以基本上我希望数字1直接在洋基队的右边，下面列出的是2,3,4,5和6。

Answer 1

嗯，你的代码中有一些错误，有些错过了结束标记，所以我检查了你的代码然后修复了错误。

<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>

Answer 2

问题不是JavaScript，而是您对table, tr, and td的理解。你也有一个没有意义的双<<。通常，您需要了解HTML的工作原理。

·table只是开始一张桌子的标志 ·tr是创建一个新行 ·td未创建新列。（与th）

相同

重要！请注意，每个开始标记都必须包含/的结束标记，例如<tr><td></td></tr>，并且必须以反转顺序关闭，因此以<tr><td></tr></td>方式关闭它们是一个错误。

因此，查看代码，您的表格将以这种方式生成（例如，ALEast的长度为3）：

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>

我会解释一下你有什么：

在＃01行中你正在创建表格，一切都很好。
在＃02行中，您正在创建标题。如您所见，您已创建了一个新行（tr），并为每个标题创建了一个新列（th）。一切都很好。
现在在从＃03到＃05（第一个循环）的行中，对于每个项目，您只需要创建一个tr的新行，每行只有一个列（只有一个{{1 }}）
第二个循环（从第06行到第11行），每次创建2行（2 td）。请注意，第一个tr没有结束标记tr所以第二行是在第一行（rowception）内创建的，这是一个错误。与下一个相同，您创建了2个列{2} /tr，第二列是在第一个列内创建的，因为它没有结束标记td。之后，您将计数结束并使用/td关闭行（？），然后再添加一个/tr（？）并使用<<关闭2列。
在完成所有这些失常后，您将在＃12行中以/td结束您的牌桌。

因此，一般来说，在设计/编程时，您必须了解自己在做什么。为此，您需要大量的HTML编码教程。从这里开始：http://www.w3schools.com/html/

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

2 个答案: