时间戳

首页 > 解决方案 > 从特定行访问表格单元格以检索其嵌入的输入值

javascript - 从特定行访问表格单元格以检索其嵌入的输入值

问题描述

我希望该函数在下表中的值上返回此操作的结果：

a+b*c-(e/f)

这个动作在没有 e 和 f 的行的情况下起作用。我在这里发现了类似的问题，但是对于这一特殊的最后一行没有解决方案。我很确定我应该如何从 e 和 f 输入中获得价值。函数 shul 对每一行都是 workinf——不管它们有多少。

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>

更新我写了一个函数，该函数应该计算来自带有变量 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>

标签： javascripthtml

解决方案

你这样做了：

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

推荐阅读