如何使用嵌套循环使用 Javascript 打印到外部循环的输出中
How do I use a nested loop to print into the output of an outer loop using Javascript?
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>");
}
}
}
没有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
}
这是一个使用 jquery 的解决方案(无需重新发明轮子) .css 表 TR TD {边框: 1px 纯灰色;}
//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/
代码中的这一行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
您可能需要尝试以下代码。
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>
相关文章:
- 在JavaScript中,变量变为循环外部的NaN
- Javascript 外部 API 调用,在 for 循环中使用变量 URL
- 为什么内部Javascript循环会阻止外部循环中断(即无限循环)
- 让ajax在服务器端的for循环内部或外部更好?Javascript
- JavaScript - 检索在外部 for 循环内生成的变量值
- 最好在循环内部还是外部声明临时变量
- 如何使用嵌套循环使用 Javascript 打印到外部循环的输出中
- 如何使用 Javascript 循环遍历外部 JSON 文件数据
- 替换从外部 IN for 循环加载的 HTML 字符串中的字符
- 余烬每循环加倍.使用内部每个循环变量的值绑定到外部每个循环的变量中命名相同的属性
- 如何设置相同的索引两次(一次在每个循环内,另一次在循环外部)
- 通过使用JQuery加载外部文件来循环元素
- 如何在CoffeeScript的内部开始求值中使用外部索引嵌套循环
- 使用带有jquery/javascript的for循环创建动态数组不能访问外部或不能访问全局
- 如何访问循环外部的地理编码坐标
- 从@foreach循环内部访问外部变量
- 如何退出each()循环并提前从外部函数返回
- 如何退出内部for.In循环并允许外部for.In循环继续
- 不能在循环内部修改在循环外部声明的数组
- Javascript作用域:在forEach循环内部声明的变量,而不是在forEach循环外部