使用calc函数从数组创建html表格？

问题描述 投票：0回答：1

我正在尝试创建一个带有表格的 HTML 页面，该表格将显示不同“对象”的列表。这些对象在测量点都有一个计算值，并在最后计算总和（噪声水平）。应该重新计算计算出的值，看看它对整个值有什么影响。

我制作了一个适用于添加来测试 JavaScript 的 3 个对象的版本。但由于我有大约 300 个对象，手动添加所有对象的时间效率不高。

那么，我是否可以用最简单的方式为大约 300 个对象创建一个表？

window.onload = function() {
  // Assuming the input elements have ids 'input1', 'input2', etc.
  var i = 1;
  while (document.getElementById('input' + i)) {
    document.getElementById('input' + i).value = 0;
    let mp1 = parseFloat(document.getElementById("mp1_" + i).innerText);
    let mp2 = parseFloat(document.getElementById("mp2_" + i).innerText);
    let mp3 = parseFloat(document.getElementById("mp3_" + i).innerText);
    document.getElementById("MP1sum" + i).innerText = mp1;
    document.getElementById("MP2sum" + i).innerText = mp2;
    document.getElementById("MP3sum" + i).innerText = mp3;
    document.getElementById("MP1recalc" + i).innerText = Math.pow(10, mp1 / 10);
    document.getElementById("MP2recalc" + i).innerText = Math.pow(10, mp2 / 10);
    document.getElementById("MP3recalc" + i).innerText = Math.pow(10, mp3 / 10);
    i++;
  }
  calculateTotal();

};

element.dispatchEvent(event);

function calculateSum(row) {
  let mp1 = parseFloat(document.getElementById("mp1_" + row).innerText);
  let mp2 = parseFloat(document.getElementById("mp2_" + row).innerText);
  let mp3 = parseFloat(document.getElementById("mp2_" + row).innerText);
  let input = parseFloat(document.getElementById("input" + row).value);
  let MP1sum = mp1 - input;
  let MP2sum = mp2 - input;
  let MP3sum = mp3 - input;
  document.getElementById("MP1sum" + row).innerText = MP1sum;
  document.getElementById("MP2sum" + row).innerText = MP2sum;
  document.getElementById("MP3sum" + row).innerText = MP3sum;
  document.getElementById("MP1recalc" + row).innerText = Math.pow(10, MP1sum / 10);
  document.getElementById("MP2recalc" + row).innerText = Math.pow(10, MP2sum / 10);
  document.getElementById("MP3recalc" + row).innerText = Math.pow(10, MP3sum / 10);
  calculateTotal();
}

function calculateTotal() {
  var totalMP1 = 0;
  var totalMP2 = 0;
  var totalMP3 = 0;
  for (var i = 1; i <= 3; i++) {
    totalMP1 += parseFloat(document.getElementById("MP1recalc" + i).innerText);
    totalMP2 += parseFloat(document.getElementById("MP2recalc" + i).innerText);
    totalMP3 += parseFloat(document.getElementById("MP3recalc" + i).innerText);
  }
  var LogTotalMP1 = 10 * Math.log10(totalMP1);
  var LogTotalMP2 = 10 * Math.log10(totalMP2);
  var LogTotalMP3 = 10 * Math.log10(totalMP3);
  document.getElementById("MP1total").innerText = Math.round(LogTotalMP1 * 10) / 10;
  document.getElementById("MP2total").innerText = Math.round(LogTotalMP2 * 10) / 10;
  document.getElementById("MP3total").innerText = Math.round(LogTotalMP3 * 10) / 10;
}
table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  border: 1px solid black;
  padding: 15px;
  text-align: left;
}
<table>
  <tr>
    <th>Bullerkälla</th>
    <th>LW</th>
    <th>MP1</th>
    <th>MP2</th>
    <th>MP3</th>
    <th>Input</th>
    <th>Sum MP1</th>
    <th>Sum MP2</th>
    <th>Sum MP3</th>
    <th style="display:none;">Recalculated Sum MP1</th>
    <th style="display:none;">Recalculated Sum MP2</th>
    <th style="display:none;">Recalculated Sum MP3</th>
  </tr>
  <tr>
    <td>101. Ventilationshus (Nordost)</td>
    <td id="lw1">86</td>
    <td id="mp1_1">19,1</td>
    <td id="mp2_1">-11</td>
    <td id="mp3_1">-11</td>
    <td><input type="number" id="input1" oninput="calculateSum(1)"></td>
    <td id="MP1sum1"></td>
    <td id="MP2sum1"></td>
    <td id="MP3sum1"></td>
    <td id="MP1recalc1" style="display:none;"></td>
    <td id="MP2recalc1" style="display:none;"></td>
    <td id="MP3recalc1" style="display:none;"></td>
  </tr>
  <tr>
    <td>101. Ventilationshus (Sydväst)</td>
    <td id="lw2">86</td>
    <td id="mp1_2">-4,2</td>
    <td id="mp2_2">-5</td>
    <td id="mp3_2">-5</td>
    <td><input type="number" id="input2" oninput="calculateSum(2)"></td>
    <td id="MP1sum2"></td>
    <td id="MP2sum2"></td>
    <td id="MP3sum2"></td>
    <td id="MP1recalc2" style="display:none;"></td>
    <td id="MP2recalc2" style="display:none;"></td>
    <td id="MP3recalc2" style="display:none;"></td>
  </tr>
  <tr>
    <td>102. Ventilationshus (Nordväst)</td>
    <td id="lw3">89</td>
    <td id="mp1_3">21,5</td>
    <td id="mp2_3">-6</td>
    <td id="mp3_3">-6</td>
    <td><input type="number" id="input3" oninput="calculateSum(3)"></td>
    <td id="MP1sum3"></td>
    <td id="MP2sum3"></td>
    <td id="MP3sum3"></td>
    <td id="MP1recalc3" style="display:none;"></td>
    <td id="MP2recalc3" style="display:none;"></td>
    <td id="MP3recalc3" style="display:none;"></td>
  </tr>
  <tr>
    <td colspan="6">Total</td>
    <td id="MP1total"></td>
    <td id="MP2total"></td>
    <td id="MP3total"></td>
    <td colspan="2" style="display:none;"></td>
  </tr>
</table>

javascript html html-table
1个回答
0
投票

就像 tacoshy 提到的那样，您需要一个循环来为 300 个对象中的每一个创建表行。

这是一个循环示例，它从对象文字中提取数据并在表中创建行。如果您的数据采用其他格式，则必须更改新的 buildNoiseTable() 函数。但这向您展示了一般过程。

我将 html 文件更改为仅具有不变的表格核心。

我从 window.onload 函数中调用新的 buildNoiseTable() 。

我还修复了calculateSum()中的一行代码，请参阅注释。

我注释掉了 element.dispatchEvent(event)，因为您此处的代码中既没有定义元素也没有定义事件。

let NoiseData = [
  { name: "101. Ventilationshus (Nordost)", lw: 86, mp1: 19.1, mp2: -11, mp3: -11 },
  { name: "101. Ventilationshus (Sydväst)", lw: 86, mp1: -4.2, mp2: -5, mp3: -5 },
  { name: "101. Ventilationshus (Nordväst)", lw: 89, mp1: 21.5, mp2: -6, mp3: -6 },
]


function buildNoiseTable( data ) {
  let tableHtml = "";
  let id = 1;

  for( let noise of data ) {
    tableHtml += `<tr>`;
    tableHtml += `<td>${noise.name}</td> <td id="lw${id}">${noise.lw}</td> <td id="mp1_${id}">${noise.mp1}</td> <td id="mp2_${id}">${noise.mp2}</td> <td id="mp3_${id}">${noise.mp3}</td> `;
    tableHtml += `<td><input type="number" id="input${id}" oninput="calculateSum(${id})"></td>`;
    tableHtml += `<td id="MP1sum${id}"></td> <td id="MP2sum${id}"></td> <td id="MP3sum${id}"></td>`;
    tableHtml += `<td id="MP1recalc${id}" style="display:none;"></td> <td id="MP2recalc${id}" style="display:none;"></td> <td id="MP3recalc${id}" style="display:none;"></td>`;
    tableHtml += `</tr>`;

    ++id;
  }

  tableHtml += `<tr>`
  tableHtml += `<td colspan="6">Total</td> <td id="MP1total"></td> <td id="MP2total"></td> <td id="MP3total"></td> <td colspan="2" style="display:none;"></td>`
  tableHtml += `</tr>`

  document.getElementById("NoiseTableBodyID").innerHTML = tableHtml
}



window.onload = function() {
  // NOTE Added this call to create the table
  buildNoiseTable( NoiseData )

  // Assuming the input elements have ids 'input1', 'input2', etc.
  var i = 1;
  while (document.getElementById('input' + i)) {
    document.getElementById('input' + i).value = 0;
    let mp1 = parseFloat(document.getElementById("mp1_" + i).innerText);
    let mp2 = parseFloat(document.getElementById("mp2_" + i).innerText);
    let mp3 = parseFloat(document.getElementById("mp3_" + i).innerText);
    document.getElementById("MP1sum" + i).innerText = mp1;
    document.getElementById("MP2sum" + i).innerText = mp2;
    document.getElementById("MP3sum" + i).innerText = mp3;
    document.getElementById("MP1recalc" + i).innerText = Math.pow(10, mp1 / 10);
    document.getElementById("MP2recalc" + i).innerText = Math.pow(10, mp2 / 10);
    document.getElementById("MP3recalc" + i).innerText = Math.pow(10, mp3 / 10);
    i++;
  }
  calculateTotal();

}


// lement.dispatchEvent(event);


function calculateSum(row) {
  let mp1 = parseFloat(document.getElementById("mp1_" + row).innerText);
  let mp2 = parseFloat(document.getElementById("mp2_" + row).innerText);
  // NOTE Fixed "mp2_" below to be "mp3_"
  let mp3 = parseFloat(document.getElementById("mp3_" + row).innerText);
  let input = parseFloat(document.getElementById("input" + row).value);
  let MP1sum = mp1 - input;
  let MP2sum = mp2 - input;
  let MP3sum = mp3 - input;
  document.getElementById("MP1sum" + row).innerText = MP1sum;
  document.getElementById("MP2sum" + row).innerText = MP2sum;
  document.getElementById("MP3sum" + row).innerText = MP3sum;
  document.getElementById("MP1recalc" + row).innerText = Math.pow(10, MP1sum / 10);
  document.getElementById("MP2recalc" + row).innerText = Math.pow(10, MP2sum / 10);
  document.getElementById("MP3recalc" + row).innerText = Math.pow(10, MP3sum / 10);
  calculateTotal();
}


function calculateTotal() {
  var totalMP1 = 0;
  var totalMP2 = 0;
  var totalMP3 = 0;
  for (var i = 1; i <= 3; i++) {
    totalMP1 += parseFloat(document.getElementById("MP1recalc" + i).innerText);
    totalMP2 += parseFloat(document.getElementById("MP2recalc" + i).innerText);
    totalMP3 += parseFloat(document.getElementById("MP3recalc" + i).innerText);
  }
  var LogTotalMP1 = 10 * Math.log10(totalMP1);
  var LogTotalMP2 = 10 * Math.log10(totalMP2);
  var LogTotalMP3 = 10 * Math.log10(totalMP3);
  document.getElementById("MP1total").innerText = Math.round(LogTotalMP1 * 10) / 10;
  document.getElementById("MP2total").innerText = Math.round(LogTotalMP2 * 10) / 10;
  document.getElementById("MP3total").innerText = Math.round(LogTotalMP3 * 10) / 10;
}
table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  border: 1px solid black;
  padding: 15px;
  text-align: left;
}
<table>
  <thead>
    <tr>
      <th>Bullerkälla</th> <th>LW</th> <th>MP1</th> <th>MP2</th> <th>MP3</th> <th>Input</th>
      <th>Sum MP1</th> <th>Sum MP2</th> <th>Sum MP3</th>
      <th style="display:none;">Recalculated Sum MP1</th> <th style="display:none;">Recalculated Sum MP2</th>
      <th style="display:none;">Recalculated Sum MP3</th>
    </tr>
  </thead>
  <tbody id="NoiseTableBodyID">
    <!-- Poplulated by javascript -->
  </tbody>
</table>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.