использование цикла for для создания значений tr и td в элементе таблицы \\ невозможно проанализировать результаты из td - PullRequest
Новая
       10

использование цикла for для создания значений tr и td в элементе таблицы \\ невозможно проанализировать результаты из td

0 голосов
/ 25 октября 2018

Я создаю таблицу, которая создает 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);             
}

Цель состоит в том, чтобы использовать цикл for, который заполняет tr и td

1.500

2 500

3 500

Ответы [ 3 ]

0 голосов
/ 25 октября 2018

Это должно работать: 

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>
0 голосов
/ 25 октября 2018

<table> & for циклы

Если вы хотите сгенерировать <table> с циклом for, вы должны использовать два цикла for - первый цикл для строк, а второйЦикл для ячеек для каждой строки.Следующая демонстрация имеет следующее:

  • A <form>, который имеет:
    • An <input> для ввода количества строк.
    • An <input>для ввода количества ячеек в строке.
    • кнопка для запуска события щелчка, вызывающего функцию generateTable().
  • <form> и все его формыэлементы управления доступны с помощью API HTMLFormControlsCollection .
  • Методы .insertRow() и .insertCell() автоматически создаст элемент и добавит его.

<form> и все, что с ним связано, не является обязательным, конечно, он просто добавлен в демонстрационных целях.Циклы можно использовать отдельно, просто присваивая номера переменным rowQty и celQty.

Demo 

/*
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>
0 голосов
/ 25 октября 2018

Если вы хотите объединить parseFloat(i) и parseFloat(500), выполните: 

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

вместо parseFloat(i) + parseFloat(500), потому что это добавит значения с плавающей точкой, а tdValue будет суммой (типа число ).

Обратите внимание на " " (строку, содержащую пробел) в середине, в которой элементы будут объединены как строки и результаттип конкатенации строка .

...