Accessing table cells from a specific row to retrieve their embedded input value

Question

I would like the function to return the result of this action on the values ​​from the table below:

a+b*c-(e/f)

This action is worked whithout row with e and f. I found similar problem here but there is no solution for this one special last row. I'm shure how i should get value from e and f inputs. The function shul be workinf for each row - no matter how many of them will be.

 function calc(id) { var row = id.parentNode.parentNode; var a = row.cells[0].getElementsByTagName('input')[0].value; var b = row.cells[1].getElementsByTagName('input')[0].value; var c = row.cells[2].getElementsByTagName('input')[0].value; var e = row.cells[0].getElementsByTagName('input')[1].value; //not working var f = row.cells[1].getElementsByTagName('input')[1].value; //not working var res = +a + +b * c - (e / f); row.cells[3].getElementsByTagName('input')[0].value = res; } 

 body { font-family: "Calibri"; margin: 0; } #inTotal { font-weight: bold; border-bottom: 2px solid black; } .nr { font-weight: bold; } input { border: none; background: transparent; text-align: center; } table, th, td { border: 1px solid black; border-collapse: collapse; } th { background-color: #b9c1ce; } .Left { text-align: left; margin-left: 5px; } 

 <table id="myTable"> <tr> <th align="center" width="5%">A</th> <th align="center" width="10%">B</th> <th align="center" width="5%">C</th> <th align="center" width="15%">Result</th> </tr> <tr> <td align="center" width="5%"><input onkeyup="calc(this);" type="text" name="quantity" min="1" max="99" onchange="calc(this);"></td> <td align="center" width="10%"><input onkeyup="calc(this);" type="text" name="summ" min="0" max="999999" onchange="calc(this);"></td> <td align="center" width="5%"><input onkeyup="calc(this);" type="text" name="rate" min="0" max="100" onchange="calc(this);"></td> <td align="center" width="15%"><input align="center" type="text" name="total" min="0" max="99999999"></td> </tr> <tr> <td align="center" width="5%"><input onkeyup="calc(this);" type="text" name="quantity" min="1" max="99" onchange="calc(this);"></td> <td align="center" width="10%"><input onkeyup="calc(this);" type="text" name="summ" min="0" max="999999" onchange="calc(this);"></td> <td align="center" width="5%"><input onkeyup="calc(this);" type="text" name="rate" min="0" max="100" onchange="calc(this);"></td> <td align="center" width="15%"><input align="center" type="text" name="total" min="0" max="99999999"></td> </tr> <tr> <th align="center" width="5%">E</th> <td align="center" width="10%"><input onkeyup="calc(this);" type="text" name="summ" min="0" max="999999" onchange="calc(this);"></td> <th align="center" width="5%">F</th> <td align="center" width="15%"><input align="center" type="text" name="total" min="0" max="99999999"></td> </tr> </table> 

UPDATE I wrote a function that was supposed to count the values ​​for data from lines with variables e and f. But unfortunately it lacks to be performed for all rows? I'm not shure how set numbers of rows to serve?

 function calc(element) { var row = element.parentNode.parentNode; var a = row.cells[0].getElementsByTagName('input')[0].value; var b = row.cells[1].getElementsByTagName('input')[0].value; var c = row.cells[2].getElementsByTagName('input')[0].value; // Getting the last row // var lastRow = document.getElementById("last-values"); // Then, retrieving e and f //var e = lastRow.cells[1].getElementsByTagName('input')[0].value; //var f = lastRow.cells[3].getElementsByTagName('input')[0].value; var res = +a + +b * c; row.cells[3].getElementsByTagName('input')[0].value = res; } function lastEle() { var y = document.getElementById('e').value; var z = document.getElementById('f').value; var mytable = document.getElementById('myTable'); var myinputs = mytable.getElementsByTagName('input'); var rowy = mytable.rows.length; for (var i = 1; i < mytable.rows.length; i++) { var tmp = mytable.rows[i].myinputs[3].value; var wynik = +y + +z + +tmp; mytable.rows[i].myinputs[4].value = wynik; } } 

  body { font-family: "Calibri"; margin:0;} #inTotal { font-weight: bold; border-bottom: 2px solid black; } .nr { font-weight: bold; } input { border: none; background: transparent; text-align: center; } table, th, td { border: 1px solid black; border-collapse: collapse; } th{ background-color: #b9c1ce; } .Left { text-align: left; margin-left: 5px; } 

 <table id="myTable"> <tr class="cipa"> <th align="center" width="5%">A</th> <th align="center" width="10%">B</th> <th align="center" width="5%">C</th> <th align="center" width="15%">D</th> <th align="center" width="15%">F</th> </tr> <tr> <td align="center" width="5%"><input onkeyup="calc(this);" type="text" name="quantity" min="1" max="99" onchange="calc(this);"></td> <td align="center" width="10%"><input onkeyup="calc(this);" type="text" name="summ" min="0" max="999999" onchange="calc(this);"></td> <td align="center" width="5%"><input onkeyup="calc(this);" type="text" name="rate" min="0" max="100" onchange="calc(this);"></td> <td align="center" width="15%"><input align="center" type="text" onchange="calc(this);lastEle();" id="ads" name="total" min="0" max="99999999"></td> <td align="center" width="15%"><input align="center" type="text" onkeyup="lastEle();" value="3" name="total" min="0" max="99999999"></td> </tr> <tr> <td align="center" width="5%"><input onkeyup="calc(this);" type="text" name="quantity" min="1" max="99" onchange="calc(this);"></td> <td align="center" width="10%"><input onkeyup="calc(this);" type="text" name="summ" min="0" max="999999" onchange="calc(this);"></td> <td align="center" width="5%"><input onkeyup="calc(this);" type="text" name="rate" min="0" max="100" onchange="calc(this);"></td> <td align="center" width="15%"><input align="center" type="text" onchange="calc(this);lastEle();" name="total" min="0" max="99999999"></td> <td align="center" width="15%"><input align="center" onkeyup="lastEle();" type="text" name="total" min="0" max="99999999"></td> </tr> <tr> <!-- e --> <th>e</th> <td><input type="text" onkeyup="lastEle();" id="e" value="" /></td> <!-- f --> <th>f</th> <td><input type="text" id="f" onkeyup="lastEle();" value="" /></td> </tr> </table> 

Answer 1

You did this:

<table>
    <tr>
        <td><input type="text" /></td>
        <td><input type="text" /></td>
        <td><input type="text" /></td>
        <td><input type="text" /></td>
    </tr>
</table>

Assuming row points to <tr> , you can access them this way, where x is the (n+1)th cell and y the (n+1)th input data :

row.cells[x].getElementsByTagName('input')[y];

Here, y could only equal 0 , because there is only one input element embedded in the td element. To access the "e and f" row, simply set an id to their row:

<tr id="last-values">
    <!--  e  -->
    <th>e</th>
    <td><input type="text" value="5" /></td>
    <!--  f  -->
    <th>f</th>
    <td><input type="text" value="6" /></td>
  </tr>

Then, rewrite your calc() function:

function calc(element) {
  var row = element.parentNode.parentNode;
  var a = row.cells[0].getElementsByTagName('input')[0].value;
  var b = row.cells[1].getElementsByTagName('input')[0].value;
  var c = row.cells[2].getElementsByTagName('input')[0].value;

  // Getting the last row
  var lastRow = document.getElementById("last-values");

  // Then, retrieving e and f
  var e = lastRow.cells[1].getElementsByTagName('input')[0].value;
  var f = lastRow.cells[3].getElementsByTagName('input')[0].value;

  var res = +a + +b * c - (e / f);

  row.cells[3].getElementsByTagName('input')[0].value = res;
}

Keep in mind that you should write another function if e or f are updated: in this case, you'll have to loop the whole rowset to update the values. I let you write this part.

Below a working snippet (without the part of e and f updating).

 function calc(element) { var row = element.parentNode.parentNode; var lastRow = document.getElementById("last-values"); var a = row.cells[0].getElementsByTagName('input')[0].value; var b = row.cells[1].getElementsByTagName('input')[0].value; var c = row.cells[2].getElementsByTagName('input')[0].value; var e = lastRow.cells[1].getElementsByTagName('input')[0].value; var f = lastRow.cells[3].getElementsByTagName('input')[0].value; var res = +a + +b * c - (e / f); row.cells[3].getElementsByTagName('input')[0].value = res; } 

 table { width: 100%; border-collapse: collapse; table-layout: fixed; } table th, table td { border: 1px solid black; } table th { background: #a0a0a0; } table td input { display: block; width: 100%; } 

 <table> <tr> <th>a</th> <th>b</th> <th>c</th> <th>res</th> </tr> <tr> <!-- a --> <td><input type="text" onKeyUp="calc(this)" /></td> <!-- b --> <td><input type="text" onKeyUp="calc(this)" /></td> <!-- c --> <td><input type="text" onKeyUp="calc(this)" /></td> <!-- res --> <td><input type="text" onKeyUp="calc(this)" /></td> </tr> <tr id="last-values"> <!-- e --> <th>e</th> <td><input type="text" value="5" /></td> <!-- f --> <th>f</th> <td><input type="text" value="6" /></td> </tr> </table>