使用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循环

1500

2500

3500

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将是总和（类型为 number ）。

请注意中间的" "（包含空格的字符串）将认为要串联的元素为字符串，并且串联的结果为 string类型。

Answer 3

file1_4 file2_7 file3_6 file5 num1 2 11 4 4 num2 3 3 3 4 num3 2 2 1 1 num4 12 1 3 1 num5 4 1 0 0 num6 1 1 1 2 和<table>循环

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

• 一个for具有：
  • 输入行数的<form>。
  • 一个<input>，用于输入每行的单元格数量。
  • 按钮以触发调用事件<input>的点击事件。
• 使用{strong> HTMLFormControlsCollection API 访问generateTable()及其所有表单控件。
• .insertRow() 和 .insertCell() 方法将自动创建元素并将其附加。

<form>及其相关的所有内容都是可选的，只是出于演示目的而添加。只需将数字分配给变量<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;
}