用于字母矩阵输出的嵌套 for 循环答案

【问题标题】：Nested for loop for letter matrix output用于字母矩阵输出的嵌套 for 循环
【发布时间】：2021-02-24 20:50:09
【问题描述】：

背景：我一直在做嵌套 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>

【问题讨论】：

你是这个意思吗？
""
不，他的意思是渲染的矩阵中还有另一行
其实，你应该总是把

标签： javascript for-loop matrix nested-loops letter

【解决方案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

【讨论】：

【解决方案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>';
}

【讨论】：

【解决方案3】：

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

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

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

【讨论】：