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
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
.package_details {
overflow: auto;
width: 100%;
}
.package_details table {
border: 1px solid #000000;
height: 100%;
width: 100%;
table-layout: fixed;
border-collapse: collapse;
border-spacing: 1px;
text-align: center;
}
.package_details caption {
caption-side: top;
text-align: left;
}
.package_details th {
border: 1px solid #000000;
background-color: #5A7C95;
color: #ffffff;
padding: 5px;
}
.package_details td {
border: 1px solid #000000;
background-color: #ffffff;
color: #000000;
padding: 5px;
}
</p>
<div class="package_details" tabindex="0" role="region">
<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>
<div style="margin-top: 8px;"> </div>
</div>
What I tried
I did some research and many posts mention adding javascript to make calculations. I tried some but no success. Further I tried to add a formula in the last column to make calculations. Sadly not results.