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>

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

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

1 个答案: