如何使用嵌套循环使用 Javascript 打印到外部循环的输出中？ [关闭]答案

【问题标题】：How do I use a nested loop to print into the output of an outer loop using Javascript? [closed]如何使用嵌套循环使用 Javascript 打印到外部循环的输出中？ [关闭]
【发布时间】：2015-02-02 00:45:37
【问题描述】：

JavaScript：

var rows = prompt("Enter amount of rows");
    columns = prompt("Enter amount of columns");


            for(counter = 0; counter <= rows; counter++){
                document.getElementById("table").innerHTML += "<tr class=\"rows\"></tr>";

                            for(i = 1; i <= columns; i++){
                document.getElementByTagName("tr").innerHTML += "<td>" + i + "</td>";
            }

HTML:

<div id="wrapper">
		<table id="table">
		</table>
</div>

如何让循环内的循环打印用户输入的列数，以及列内“i”的值？当我运行它时，我得到了第一个循环的输出，但我无法让第二个循环写入第一个循环的输出。我很感激帮助。

编辑：

好的，所以我尝试修改代码并提出了这个。仍然没有工作，但我认为这是有道理的？我正在尝试使用用户输入制作表格。

HTML 保持不变

Javascript：

var rows = prompt("Enter amount of rows");
                columns = prompt("Enter amount of columns");

            if(isNaN(rows) || isNaN(columns) || rows < 1 || columns < 1){
                alert("Please enter a whole positive number!");
            }
                else{

                    for(i=0; i<rows; i++){

                    document.getElementById("table").innerHTML += document.write("<tr>");
                        for(j=1; j<columns; j++){
                            document.getElementById("table").innerHTML += "<td>" + j + "</td>;
                        }
                    document.getElementById("table").innerHTML += document.write("</tr>");
                    }
                }
            }

【问题讨论】：

我不明白这是什么问题...
代码中没有嵌套循环...

标签： javascript html loops nested-loops

【解决方案1】：

没有getElementByTagName，我相信您的意思是返回元素列表的getElementsByTagName。

一个快速的“解决方案”是将行更改为 document.getElementsByTagName("tr")[counter].innerHTML += "" + i + "";

如果使用文档元素，我建议使用 document.createElement 和 document.appendChild。

var rows = prompt("Enter amount of rows");
var columns = prompt("Enter amount of columns");

var table = document.getElementById("table");

for(counter = 0; counter <= rows; counter++){
    var row = document.createElement("tr"); //creates our row
    row.className = "rows"; //applies a class

    for(i = 1; i <= columns; i++) {
        var column = document.createElement("td"); //creates a column
        column.appendChild(document.createTextNode(i)); //appends a text node with the value of 'i'
        row.appendChild(column); //Adds the column to our row
    }
    table.appendChild(row); //Add our row to the table
}

【讨论】：

【解决方案2】：

这是使用 jquery 的一种解决方案（无需重新发明轮子） //css table tr td {border: 1px solid gray;}

//html
<table id="table">

</table>

$(document).ready(function() {
     var rows = 10, cols = 5, i, j, row, table = $("#table");

    for ( i = 0; i < rows; i++) {
       row = $("<tr></tr>");
       for ( j = 0; j < cols; j++) {
           row.append("<td>"+ i + ":" + j +"</td>");
       }
       table.append(row);
    }
});

点击下方查看工作示例 http://jsfiddle.net/k9z0mxo0/2/

【讨论】：

【解决方案3】：

代码中的这一行失败document.getElementByTagName("tr")。

试试这个例子：

var rows = +(prompt("Enter amount of rows")); //parse to number
var columns = +(prompt("Enter amount of columns"));
var html = []; //array
var cnt = 1;

for(var r = 1; r <= rows; r++){
    html.push('<tr class="row">');
    for(var c = 1; c <= columns; c++) {
       html.push('<td>');
       html.push(cnt ++);
       html.push('</td>');
    }
    html.push('</tr>');
}
document.getElementById("table").innerHTML = html.join('');//concate string to build inner html for the table

【讨论】：

【解决方案4】：

您可能想尝试以下代码。

function buildTable() {
  var rows, cols, tr, td, x, y, tbl;

  //--- prompt for inputs
  rows = prompt("rows", 1);
  cols = prompt("cols", 1);

  //--- range check
  rows = Math.abs(parseInt(rows, 10));
  cols = Math.abs(parseInt(cols, 10));
  if (rows < 1 || cols < 1) return;

  //--- get table to append cells to
  tbl = document.getElementById('table');

  //--- use DOM to append cells
  for (x = 0; x < rows; x++) {
    tr = document.createElement('tr');

    for (y = 0; y < cols; y++) {
      td = document.createElement('td');
      td.innerHTML = y;
      //--- the correct was is
      //td.appendChild(document.createTextNode(y));
      //--- append to row
      tr.appendChild(td);
    }
    //--- append to table
    tbl.appendChild(tr);
  }
}

<table id="table">
</table>
<a href='#' onclick='buildTable(); return false'>Build Table</a>

【讨论】：