I have a created a HTML table which is editable.
The table contains some cells are predefined with the numbers 1-5, than there is section where the user can enter data and in the last column there should be the result of the data of the previous cells. Now I want the add a formula like you have for instances with Excel. How I can make calculations in the HTML table with Javascript or any other method?
Details table
enter image description here
Column 1: packages is predefined
Column 2: here user can add weight in kg
Column 3: user adds here the length
Column 4: user adds here the width
Column 5: user adds here height
Column 6: user adds split (%)
Column 7: Volume weight = result formule is:length x width x height x 200
HTML table + script
function calculateVolumeWeight() {
let totalSplit = 0;
const errorElement = document.getElementById('error');
errorElement.innerHTML = ""; // Clear previous errors
for (let i = 1; i <= 3; i++) {
// Get input values
const length = parseFloat(document.getElementById(`length${i}`).value) || 0;
const width = parseFloat(document.getElementById(`width${i}`).value) || 0;
const height = parseFloat(document.getElementById(`height${i}`).value) || 0;
const split = parseFloat(document.getElementById(`split${i}`).value) || 0;
// Calculate volume weight
const volumeWeight = (length * width * height) / 200;
// Display volume weight
document.getElementById(`volumeWeight${i}`).innerText = volumeWeight.toFixed(2);
// Accumulate split percentages
totalSplit += split;
}
// Validate the total split
if (totalSplit !== 100) {
errorElement.innerHTML = "Error: The total split percentage must equal 100%.";
} else {
errorElement.innerHTML = "Total split is correct.";
}
}
// Add event listeners to all input fields
document.querySelectorAll('input').forEach(input => {
input.addEventListener('input', calculateVolumeWeight);
});table {
width: 100%;
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
text-align: center;
}
#error {
color: red;
margin-top: 20px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Auto-Calculate Packaging Table</title>
</head>
<body>
<h2>Top 3 Packaging in Use</h2>
<table>
<thead>
<tr>
<th>Packages</th>
<th>Weight (kg)</th>
<th>Length (cm)</th>
<th>Width (cm)</th>
<th>Height (cm)</th>
<th>Split (%)</th>
<th>*Volume Weight</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><input type="number" id="weight1" step="any"></td>
<td><input type="number" id="length1" step="any"></td>
<td><input type="number" id="width1" step="any"></td>
<td><input type="number" id="height1" step="any"></td>
<td><input type="number" id="split1" step="any"></td>
<td><span id="volumeWeight1">0</span></td>
</tr>
<tr>
<td>2</td>
<td><input type="number" id="weight2" step="any"></td>
<td><input type="number" id="length2" step="any"></td>
<td><input type="number" id="width2" step="any"></td>
<td><input type="number" id="height2" step="any"></td>
<td><input type="number" id="split2" step="any"></td>
<td><span id="volumeWeight2">0</span></td>
</tr>
<tr>
<td>3</td>
<td><input type="number" id="weight3" step="any"></td>
<td><input type="number" id="length3" step="any"></td>
<td><input type="number" id="width3" step="any"></td>
<td><input type="number" id="height3" step="any"></td>
<td><input type="number" id="split3" step="any"></td>
<td><span id="volumeWeight3">0</span></td>
</tr>
</tbody>
</table>
<p id="error"></p>
</body>
</html>What I tried
I did some research and many posts mention adding javascript to make calculations. I wrote the above code, the split percentage needs te be 100 % and all the fields needs to be filled. Which should results in a result in volume weight but nothing happends.
6
You could iterate over the table rows and tabulate like so
const recalculate = (ev) => {
document.querySelectorAll('tbody > tr').forEach(row => {
const cells = row.children;
// formule is:length x width x height x 200
let length = Number(cells.item(2).innerText);
let width = Number(cells.item(3).innerText);
let height = Number(cells.item(4).innerText);
row.lastElementChild.innerText = length * width * height * 200;
});
};
document.querySelectorAll('[contenteditable="true"]').forEach(el => {
el.addEventListener("input",recalculate);
});table td {
border: 1px dotted gray;
} <table>
<caption>
<p><strong>Volume weight = L X W X H * 200</strong></p>
</caption>
<thead>
<tr>
<th>Packages</th>
<th>Weight (kg)</th>
<th>
<p>Length (cm)</p>
</th>
<th>Width (cm)</th>
<th>Height (cm)</th>
<th>Split (%)</th>
<th>*Volume weight</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td> </td>
</tr>
<tr>
<td>2</td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td> </td>
</tr>
<tr>
<td>3</td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td> </td>
</tr>
<tr>
<td>4</td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td> </td>
</tr>
<tr>
<td>5</td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td> </td>
</tr>
</tbody>
</table>2