字母矩阵输出的嵌套for循环

Question

背景： 我一直在做嵌套 for 循环练习。我正在编写的程序旨在获取列和行数据并使用嵌套 for 循环创建字母矩阵或网格。我能够让数据在网格中编译（太棒了！）但是网格顶部有一行不必要的数据。（不太好......）任何人都可以让我知道是什么导致了这个，我相信这是非常简单的事情，但我的大脑可能因为看了这么久而炸了。

如有任何帮助，我们将不胜感激。

<!DOCTYPE html>

<html lang="en">

<head>
    <title>""</title>

    <script>
        function letter_matrix() {

            let column = parseInt(document.form.letter_column.value);
            let rows = parseInt(document.form.letter_rows.value);
            let text = "<table><th></th>";

            let letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ";
            

            for (let i = 0; i < rows ; ++i) {
             
             text += "<tr>"+ letters.charAt(i) + "</td>";

               for(let j = 0; j < column ; j++){
                
                   let k = (i * rows + j) % 26;

                   text += "<td>"+letters.charAt(k)+ "</td>";
               }

               
        }
        text += "</table>";
 
        document.getElementById("results").innerHTML= text;
    }
    </script>
</head>

<body>
    <h1>""</h1>

    <form name="form" action = "javascript:letter_matrix();">

        Columns: <input type="text" name="letter_column">
        Rows: <input type="text" name="letter_rows">

        <input type="submit" value="Enter values.">

    </form>

    <pre id="results">
    </pre>
</body>

</html>

Answer 1

您需要拆分 <tr> 标签，如下所示。此行导致问题

text += "<tr>"+ letters.charAt(i) + "</td>";

你得到的异常结果只是因为那个。请参阅下面的代码，我是如何在 for 循环之后使用 </tr> 并删除 letter.charAt(i) 的。这是在添加额外的行。

         text += "<tr>";
        
           for(let j = 0; j < column ; j++){
            
               let k = (i * rows + j) % 26;
        
               text += "<td>"+letters.charAt(k)+ "</td>";
           }
         text += "</tr>";

参考工作演示here

Answer 2

在您的第一个 for 中，您创建了一个 <tr> 添加了一些文本并关闭了一个 </td>。

您很可能只打开一个 tr，然后在内部 for 之后关闭 tr

for (let i = 0; i < rows; ++i) {
  text += "<tr>";
  for (let j = 0; j < column; j++) {
    let k = (i * rows + j) % 26;
    text += "<td>" + letters.charAt(k) + "</td>";
  }
  text += '</tr>';
}

Answer 3

就是这样。 https://jsfiddle.net/Cornel777/kgbojuhz/8/

刚刚在此处添加了"<td>"text += "<tr>"+ "<td>" + letters.charAt(i) + "</td>";
将你的 <script> 移到 <body>
之后
这样做了，但这不是强制性的，只是较新的。

let column = document.getElementById("columns").value;

let rows = document.getElementById("rows").value;

 <!DOCTYPE html>
    
    <html lang="en">
    
    <head>
        <title>""</title>
    
      
    </head>
    
    <body>
        <h1>""</h1>
    
        <form name="form" action = "javascript:letter_matrix();">
    
            Columns: <input id="columns" type="text" name="letter_column">
            Rows: <input id="rows" type="text" name="letter_rows">
    
            <input type="submit" value="Enter values.">
    
        </form>
    
        <pre id="results">
        </pre>
    </body>
    
      <script>
            function letter_matrix() {
    
                let column = document.getElementById("columns").value;
                let rows = document.getElementById("rows").value;
                let text = "<table><th></th>";
    
                let letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ";
                
    
                for (let i = 0; i < rows ; i++) {
                 
                 text += "<tr>"+ "<td>" + letters.charAt(i) + "</td>";
    
                   for(let j = 0; j < column ; j++){
                   
                
                       let k = (i * rows + j) % 26;
    
                       text += "<td>"+letters.charAt(k)+ "</td>";
                   }
    
                   
            }
            
            text += "</table>";
     
            document.getElementById("results").innerHTML= text;
        }
        </script>
    
    </html>
    
      [1]: https://i.stack.imgur.com/Ey2gn.png

字母矩阵输出的嵌套for循环

Nested for loop for letter matrix output

javascript

for-loop

letter

matrix

nested-loops