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

用户名

我希望函数返回下表中值的操作结果:

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>

Amessihel

您这样做:

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

JQGrid在嵌入式编辑中从自定义错误消息中删除单元格值

根据其因子值为特定数据表单元格上色

如何使用javascript获取特定表单元格中输入的值?

如何从特定行和列python的单元格中检索值?

Excel VBA嵌入式FOR循环从外部条件中排除单元格

Excel 2010公式输入单元格争论的特定单元格

检索单元格的值(如果它属于特定列)

访问HTML表单元格并更改值

Excel VBA遍历空单元格并检索行值

突出显示已悬停的行的特定表单元格

允许用户在锁定的单元格中输入特定值

如何在嵌入式UIViewController中的UITableView中直观地创建和使用静态单元格

根据特定列中的单元格值删除行

Handsontable-隐藏特定行(按单元格值)

#mxgraph:检索单元格的旋转值

对齐Bootstrap表单中的嵌入式文本输入

Symfony:保留嵌入式表单并避免重复输入

将VBA嵌入到工作表中以根据单元格的值显示/隐藏表单控件

读取.xlsx并访问单元格值,但不按其位置访问

如果特定单元格小于其上方的单元格,如何突出显示一行信息?

如果单元格包含“特定文本”,则返回其旁边的单元格的值。类似于VLOOKUP

如何使用jQuery .find()从嵌入式对象检索值

如果单元格值包含列表中的值(通配符匹配),请从特定列检索数据

检索单元格的公式,而不是其结果

通过用户输入和Java脚本更改特定表单元格中的文本

将特定值放在数据库的特定表单元格中。(剃刀-html)

限制Excel单元格输入值

访问剑道网格单元格值

Javascript:将输入值与多个表单元格值相乘,然后将其分配给其他表单元格