Im trying to create a html page with a table that will show a list of different “objects”. These objects all have a calculated value in a measuring point, a total sum are calculated at the end (noise level). The calculated value should be recalculated to see what difference it makes to the whole value.
Ive made a version that works for the 3 objects added to test the javascript. But since I have about 300 objects its not time efficient to manually add all the objects by hand.
So, have do I create a table for about 300 objects the simplest way?
<!DOCTYPE html>
<html>
<head>
<title>Table</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 15px;
text-align: left;
}
</style>
</head>
<body>
<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>
<script>
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;
}
</script>
</body>
</html>
New contributor
Mikael Hörnqvist is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.