how to create a dynamic table in a webpage - html

Question

I am trying to learn how to create webpage with a "dynamic" table inside. I have zero experience in creating webpages but still I was able to construct the shape of the table by means of the use of html (the image below is a very basic in a very basic version):
For summarizing, let's say I want that the web page allows you to introduce A, B, ... J manually using the keyboard as input and it should show you automatically the sum of all of the rows in the column K. I have no idea what technology/code should I use... javascript? PHP? I have good skills in python, could it help somehow? I would like to do it as fast as possible.
Thanks in advance

Answer 1

You can do this by manually creating the table and adding Event Listeners that listen to changes in the table inputs. You can then use the values of the table inputs to calculate the output and display it in the K column:
const inputs = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'];
// Get the output column
const output = document.getElementById('output');
// Calculate the total from all inputs
function calculate() {
// Start with zero
let total = 0;
// For each element, get the value and add it to total.
inputElements.forEach(inputElement => {
// If the element does not have a value, we just add 0 (this is what the "|| 0" is for)
total += Number(inputElement.value) || 0;
});
// Display the total in the output column
output.innerHTML = total;
}
// Get all the input columns
const inputElements = inputs.map(input => document.getElementById(`input-${input}`));
// Add Event Listeners to all the input columns
inputElements.forEach(inputElement => inputElement.addEventListener('change', calculate));
table input {
width: 45px;
}
<table id="container">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
<th>F</th>
<th>G</th>
<th>H</th>
<th>I</th>
<th>J</th>
<th>K</th>
</tr>
</thead>
<tbody>
<tr>
<td><input id="input-A" type="number" /></td>
<td><input id="input-B" type="number" /></td>
<td><input id="input-C" type="number" /></td>
<td><input id="input-D" type="number" /></td>
<td><input id="input-E" type="number" /></td>
<td><input id="input-F" type="number" /></td>
<td><input id="input-G" type="number" /></td>
<td><input id="input-H" type="number" /></td>
<td><input id="input-I" type="number" /></td>
<td><input id="input-J" type="number" /></td>
<td id="output"></td>
</tr>
</tbody>
</table>