從特定行訪問表單元格以檢索其嵌入式輸入值

Question

我希望函數返回下表中值的操作結果：

a + b * c-（e / f）

在不使用e和f的情況下執行此操作。 我在這里發現了類似的問題，但對於這一特殊的最后一行沒有解決方案。 我確定如何從e和f輸入中獲取價值。 無論行數多少，該函數都應在每行中起作用。

 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我編寫了一個函數，該函數應該計算具有變量e和f的行中數據的值。 但是不幸的是，缺少對所有行執行的操作嗎？ 我不知道如何設置服務的行數？

 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

您這樣做：

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

假設row指向<tr> ，則可以通過這種方式訪問​​它們，其中x是第(n+1)th單元格， y第(n+1)th輸入數據：

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

此處， y只能等於0 ，因為td元素中僅嵌入一個輸入元素。 要訪問“ e和f”行，只需在其行中設置一個id：

<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>

然后，重寫您的calc（）函數：

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;
}

請記住，如果e或f已更新，則應編寫另一個函數：在這種情況下，必須循環整個行集以更新值。 我讓你寫這部分。

在有效的代碼段下方（不更新e和f）。

 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>