使用 for 循环在 table 元素中创建 tr 和 td \\ 无法解析 td 的结果

Question

我正在创建一个 table，它在 table 中创建 tr 和 td。 table with 循环执行减法计算并创建一列 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

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

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

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

注意中间的 " "（包含 space 的字符串），它将认为要连接的元素为 strings 和结果连接类型为 string.

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

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

Answer 3

`<table>` & `for` 循环

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

一个 <form> 具有：
- 一个<input>输入行数。
- 用于输入每行单元格数的 <input>。
- 按钮触发调用函数generateTable()的点击事件。
<form> 及其所有表单控件都可以使用 HTMLFormControlsCollection API.
.insertRow() and .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>

使用 for 循环在 table 元素中创建 tr 和 td \\ 无法解析 td 的结果

using a for loop to create tr's and td's in a table element \\ unable to parse results from td's

html

javascript

for-loop

createelement

`<table>` & `for` 循环

演示

使用 for 循环在 table 元素中创建 tr 和 td \\ 无法解析 td 的结果

using a for loop to create tr's and td's in a table element \\ unable to parse results from td's

html

javascript

for-loop

createelement

<table> & for 循环

演示

`<table>` & `for` 循环