Skip to content

How to print or get the cell value from HTML TABLE(User Input)

kafkaMeta

I have a table and in the table, I have tag to get user input. I want to print or get the value from the table cell. I want to input two number such as 12 and 14 and then print sum value at result id. I don’t want to use the form tag. Is it possible to do this? Thanks.

for(i=0;i<x.length-1;i++)
  {
  result=x[i].cellIndex + x[i+1].cellIndex;
  document.getElementById("result").innerHTML=result;
  }
<!DOCTYPE HTML>
<html>

<body>
<table>
  <tr>
      <td> <input id="firstnumber" type="number"> </td>
      <td> <input id="secondNumber" type="number"> </td>
  </tr>
  <p id="result"></p>
</table>
</body>
</html>

Advertisement

Answer

Here is a working example

// get the Dom object of the ttwo cells
var cell1 = document.querySelector("#firstnumber"),
  cell2 = document.querySelector("#secondNumber");

// when the user writes on each of them the result changes
cell1.oninput = cell2.oninput = function() {
  // + before the cell.value only for casting the string to a number
  document.getElementById("result").innerHTML = +cell1.value + +cell2.value;
}
<!DOCTYPE HTML>
<html>

<body>
<table>
  <tr>
      <td> <input id="firstnumber" type="number"> </td>
      <td> <input id="secondNumber" type="number"> </td>
  </tr>
  <p id="result"></p>
</table>
</body>
</html>