使用 for 循环在表元素中创建 tr 和 TD \\ 无法解析来自 TD 的结果

Question

>我正在创建一个表，该表在表中创建tr和td。该表循环通过减法计算并从for循环中创建一列结果。当我尝试添加下一列时，它不会解析计算，而是继续执行计算

for (i=foo; i<bar+1; i++)
{               
var tableNode = document.getElementById('tableID');
var trNode = document.createElement('tr');
var trValue = '';
var tdNode = document.createElement('td');
var tdValue = parseFloat(i) + parseFloat(500); //this is calculating 500 and not concatenating 500 for every iteration.
trNode.innerHTML = trValue;
tdNode.innerHTML = tdValue;
tableNode.appendChild(trNode);
trNode.appendChild(tdNode);             
}

目标是使用填充 tr 和 td 的 for 循环

1 500

2 500

3 500

Answer 1

这应该有效：

let foo = 1,
bar = 3;
for (let i = foo; i <= bar; i++) {
var tableNode = document.getElementById("tableID");
let trNode = document.createElement("tr");
let trValue = "";
let tdNode = document.createElement("td");
let tdValue = parseFloat(i) + ' ' + parseFloat(500);
trNode.innerHTML = trValue;
tdNode.innerHTML = tdValue;
trNode.appendChild(tdNode);
tableNode.appendChild(trNode);
}

table tr td {
border: 1px solid #ccc;
}

<table id="tableID"></table>

Answer 2

如果要连接parseFloat(i)和parseFloat(500)，请执行以下操作：

var tdValue = parseFloat(i) + " " + parseFloat(500);

而不是parseFloat(i) + parseFloat(500)因为这将添加浮点值，tdValue将是总和(数字类型)。

请注意中间的" "(包含空格的字符串)，它将考虑要连接的元素为字符串，并将连接的结果视为字符串类型。

Answer 3

<table>&for循环

如果要生成具有for循环的<table>，则应使用两个for循环 - 第一个循环用于行，第二个循环用于每行的单元格。以下演示具有以下内容：

• 具有以下特征的<form>：
  • 用于输入行数的<input>。
  • 用于输入每行单元格数的<input>。
  • 按钮触发调用函数的 Click 事件generateTable()。
• <form>及其所有表单控件都可以使用HTMLFormControlsCollection API进行访问。
• 方法.insertRow()和.insertCell()将自动创建一个元素并追加它。

当然，<form>和与之相关的所有内容都是可选的，它只是出于演示目的而添加的。只需将数字分配给变量rowQty和celQty即可单独使用循环。

演示

/*
Optional
*/
var ui = document.forms[0].elements;
var btn = ui.btn;
btn.onclick = generateTable;
/*
Required
*/
function generateTable(e) {
var table = document.getElementById('T0');
/*
if used without the <form>
replace the next two lines with:
*/
//var rowQty = {any integer}
//var celQty = {any integer 2 or greter}
var rowQty = ui.rowData.value;
var celQty = ui.celData.value;
for (let i = 0; i < rowQty; i++) {
var tr = table.insertRow(i);
for (let j = 0; j < celQty; j++) {
var td = tr.insertCell(j);
if (j === 0) {
td.textContent = i + 1;
} else if (j === 1) {
td.textContent = "500";
} else {
td.textContent = " ";
}
}
}
}

table {
border-collapse: collapse;
table-layout: fixed;
}
table,
td {
border: 1px solid #000;
text-align: right;
}
td {
min-width: 3ch;
max-width: 150px;
}
td:first-of-type {
width: 3ch;
text-align: center;
}
input {
display: inline-block;
text-align: center;
width: 5ch;
}

<!-- Optional -->
<form id='ui'>
<label for='rowData'>Rows: </label>
<input id='rowData' type='number' min='1' max='10' value='1'>
<label for='celData'>Cells per Row: </label>
<input id='celData' type='number' min='2' max='10' value='2'>
<button id='btn' type='button'>GO</button>
</form>
<!-- Required -->
<table id='T0'></table>