I am working on a project where I need to calculate some numbers in html table. they'll need to see the end sum. Is there any other way that can calculate the value without using <input> tag. If I use , the display will bee like box within box, like the picture below:

My code is below:

<tr oninput="Total-dep.value=parseInt(Dep-main.value)+parseInt(Dep-joint1.value)">
   <td>No. of Dependant(s)</td>
   <td contenteditable="true" id="Dep-main" value="0"></td>
   <td contenteditable="true" id="Dep-joint1" value="0"></td>
   <td contenteditable="true" name="Total-dep" for="Dep-main Dep-joint1" value=""></td>
</tr>

The current display result is below:

I want to use the first two column to add up together and then sum up in the last column.

I am working on a project where I need to calculate some numbers in html table. they'll need to see the end sum. Is there any other way that can calculate the value without using <input> tag. If I use , the display will bee like box within box, like the picture below:

My code is below:

<tr oninput="Total-dep.value=parseInt(Dep-main.value)+parseInt(Dep-joint1.value)">
   <td>No. of Dependant(s)</td>
   <td contenteditable="true" id="Dep-main" value="0"></td>
   <td contenteditable="true" id="Dep-joint1" value="0"></td>
   <td contenteditable="true" name="Total-dep" for="Dep-main Dep-joint1" value=""></td>
</tr>

The current display result is below:

I want to use the first two column to add up together and then sum up in the last column.

• javascript
• html
• css

• Can you share your try! – Mohamed Abbas Commented Jun 27, 2017 at 14:34
• the event should be onblur – Laazo Commented Jun 27, 2017 at 14:35
• 1 You could use CSS to modify the appearance of each input box. – hRdCoder Commented Jun 27, 2017 at 14:36

2 Answers 2

You can hide the border of the input text field using css.

{
    border: none;
    outline: none;
    box-shadow: none;
}

You can use the input element and just style it to not have any borders.

Also, the name and value attributes are only valid on form elements and the for attribute is not valid on td elements either.

Lastly, a tr element doesn't have an input event, only form elements do.

// Do all your JavaScript in a separate JavaScript section
var main = document.getElementById("Dep-main");
var joint1 = document.getElementById("Dep-joint1");
var total = document.getElementById("Total-dep");

var inputs = Array.prototype.slice.call(document.querySelectorAll("td > input"));

inputs.forEach(function(input){

  input.addEventListener("blur", function(){
    // Always supply the second argument to parseInt() (the radix) so you
    // dont' get non-base 10 answers.
    total.value = parseInt(main.value, 10) + parseInt(joint1.value, 10);
  });

});

td { border:1px solid black; }
td > input { border:none; } /* Remove normal border */
td > input:active, td > input:focus { outline:none; } /* Remove outline when active or focused */

<table>
<tr>
  <td>Other</td>
  <td>Some</td>
  <td>Other</td>
  <td>Row</td>
</tr>
<tr id="row">
   <td>No. of Dependant(s)</td>
   <td><input type="text" id="Dep-main" value="0"></td>
   <td><input type="text" id="Dep-joint1" value="0"></td>
   <td><input type="text" id="Total-dep" readonly></td>
</tr>
</table>