Just a few days back, I posted a question similar to this one and received an incredibly helpful response.
However, my attempt at creating a table calculator has hit a snag. Each table row in a particular column already has an assigned `id` to transform the table into a calculator. Unfortunately, this messes up the solution provided in the original question when I try to implement it on my end (resulting in JavaScript reading "kg" as part of a number and displaying the sum as "NaN").
Moreover, there is an unsightly visible text box within each cell above the answer line – not a good look. My existing code features cells that do not present as text boxes but remain editable, offering a much cleaner user experience in my opinion (although functionally redundant, aesthetics matter a great deal to me!).
Below is an outline of the desired code layout. I am aiming for numbers/input to be positioned on the right side of the text box while remaining on the left side of the unit ("kg").
Refer below for a visual representation of what I aim to achieve (with numbers situated on the right).
https://i.sstatic.net/QNxSK.png
Here's the excerpt of the code:
<head>
<style>
table {
border: 1px solid black;
border-collapse: collapse;
font-family: Arial, sans-serif;
margin: 5px;
width: 100%;
}
th, td {
border: 1px solid black;
border-collapse: collapse;
font-family: Arial, sans-serif;
margin: 5px;
padding: 5px;
}
</style>
</head>
<body>
<table>
<tr>
<th>header1</th>
<th>header2</th>
</tr>
<tr>
<td>entry1</td>
<td id="entry1" oninput="myFunction()">4000</td>
</tr>
<tr>
<td>entry2</td>
<td id="entry2" oninput="myFunction()">200</td>
</tr>
<tr>
<td>Total</td>
<td id="total"></td>
</tr>
</table>
<script type="text/javascript">
document.getElementById("entry1").contentEditable = true;
document.getElementById("entry2").contentEditable = true;
function myFunction() {
var entry1 = document.getElementById("entry1").innerText;
var entry2 = document.getElementById("entry2").innerText;
var total2 = parseInt(entry1) + parseInt(entry2);
document.getElementById("total").innerHTML = total2;
}
myFunction();
</script>
</body> The current setup calculates the numbers from the right column and reflects the sum in the last row. However, I desire units to display here (e.g., "kg") off to the side – non-editable and without being interpreted as numerals in the JavaScript function. Additionally, eliminating the unattractive textbox boundary within the cell would be welcoming.
Is this scenario achievable? Answers are eagerly welcomed!