CODEWITHSUNDEEP
javascripthtmlcss
xhinvis
xhinvis

Reputation: 211

Calculation within html table

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 become like box within box, like the picture below: enter image description here

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: enter image description here

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

Upvotes: 0

Views: 4860

Answers (2)

Scott Marcus
Scott Marcus

Reputation: 65806

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>

Upvotes: 2

prajeesh
prajeesh

Reputation: 2382

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

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

Upvotes: 3

Related Questions