【问题标题】：using a for loop to create tr's and td's in a table element \\ unable to parse results from td's使用 for 循环在表元素中创建 tr 和 td \\无法解析来自 td 的结果
【发布时间】：2019-03-29 15:02:57
【问题描述】：

我正在创建一个在表中创建 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 循环

1500

2500

3500

【问题讨论】：

使用 parseInt 而不是 parseFloat
尝试在中间添加一个空字符串。 var tdValue = parseFloat(i) + "" + parseFloat(500);

标签： javascript html for-loop createelement

【解决方案1】：

`<table>` & `for` 循环

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

<form> 具有：
- <input> 输入行数。
- <input> 用于输入每行的单元格数。
- 按钮触发点击事件，调用函数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>

【讨论】：

【解决方案2】：

这应该可行：

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;
}

&lt;table id="tableID"&gt;&lt;/table&gt;

【讨论】：

【解决方案3】：

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

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

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

注意中间的" "（包含空格的字符串），它会将要连接的元素视为strings，并且连接的结果是string类型强>。

【讨论】：

&lt;table&gt; & for 循环

演示

`<table>` & `for` 循环