Question

我得到了这个表，我想要对两个文本字段的值求和：

＆＃13;

from subprocess import *
a = Popen(['ls'],stdout = PIPE,shell=True)
b = Popen("gedit hello.txt",stdin = a.stdout,shell=True)

＆＃13;

function myAdd() {
    var table = document.getElementById("myTable");
    var row = table.insertRow(1);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(0);
	var cell3 = row.insertCell(0);
	var cell4 = row.insertCell(0);
	var cell5 = row.insertCell(0);
    cell1.innerHTML = "<input name='totalOf' type='text' class='fields' id='totalOf'>";
    cell2.innerHTML = "<input name='price' type='text' class='fields' id='price'>";
	cell3.innerHTML = "<input name='acceptedKgMeters' type='text' class='fields' id='acceptedKgMeters'>";
	cell4.innerHTML = "<input name='nameofArticle' type='text' class='fields fieldstwo' id='nameofArticle'>";
	cell5.innerHTML = "";
}
function myDelete() {
    document.getElementById("myTable").deleteRow(1);
}

＆＃13;

＆＃13; 当您运行代码段并单击＆＃34;添加行按钮＆＃34;添加了一个新行。在第二行中，textfields表示不满。因此，当我在第3列下面的文本字段中的第2列和第5列下面的文本字段中输入示例3时，我希望它在列总计下面的文本字段中显示结果。

感谢您的帮助！：）

Answer 1

您需要在脚本中添加一个sum函数并将其称为 sum（this），而不是调用sum函数onkeyup，您应该在onchange上调用它。尝试下面的脚本。

 function myAdd() {
        var table = document.getElementById("myTable");
        var row = table.insertRow(1);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(0);
        var cell3 = row.insertCell(0);
        var cell4 = row.insertCell(0);
        var cell5 = row.insertCell(0);
        cell1.innerHTML = "<input name='totalOf' type='text' class='fields' value='0' class='totalOf'>";
        cell2.innerHTML = "<input name='price' type='text' class='fields' onchange='sum(this);' id='price'>";
        cell3.innerHTML = "<input name='acceptedKgMeters' type='text' class='fields' onchange='sum(this);' id='acceptedKgMeters'>";
        cell4.innerHTML = "<input name='nameofArticle' type='text' class='fields fieldstwo' id='nameofArticle'>";
        cell5.innerHTML = "";
    }
    function myDelete() {
        document.getElementById("myTable").deleteRow(1);
    }
    function sum(element){
        //Get This Table Row 
        var  tr = element.parentNode.parentNode;
        //Get Column 1 and Column 2 Values 
        var column1 = tr.childNodes[2].childNodes[0].value;
        var column2 = tr.childNodes[3].childNodes[0].value;

        //Check if column1 is undefined 
        if (!column1){
            column1 = 0;
        }
        //Check if column2 is undefined 
        if (!column2){
            column2 = 0;
        }

        //Sum column1 and column2 and return value to last td in table 
         tr.lastChild.childNodes[0].value = parseFloat(column1)+parseFloat(column2);
        }

Answer 2

在这里，它应该有用，它适用于我

<!doctype html>
<html>



<style>
table, td {
    border: 1px solid black;
}
</style>

<!--This is the table*-->

  <table width="100%" border="1" id="myTable">
    <tr id="myTable">
      <th width="7%" id="cell1" scope="col">Row.Num.</th>
      <th width="33%" id="cell2" scope="col">Column1</th>
      <th width="31%" id="cell3" scope="col">Column2</th>
      <th width="7%" id="cell4" scope="col">Column3</th>
      <th width="22%" id="cell5" scope="col">Total</th>
    </tr>
    </table>

<!--These are the buttons. The ones that I add and delete rows.-->
  <p>
    <input name="addRow" type="submit" class="addRowbtn" onClick="myAdd();" value="Add row" />
    <input name="deleteRow" type="submit" class="addRowbtn" onClick="myDelete();" value="Delete Row" />
  </p>


  <script>
  function myAdd() {
    var table = document.getElementById("myTable");
    var cellt1 = cell1;
    var cellt2 = cell2;
    var cellt3 = cell3;
    var cellt4 = cell4;
    var cellt5 = cell5;
    var row = table.insertRow(1);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    var cell4 = row.insertCell(3);
    var cell5 = row.insertCell(4);
    cell1.innerHTML = "<input name='totalOf' type='text' class='fields' id='totalOf'>"
    cell2.innerHTML = "<input name='price' type='text' class='fields' ' id='price'>";
    cell3.innerHTML = "<input name='acceptedKgMeters' type='text' class='fields' onkeyup='sum()' id='acceptedKgMeters'>";
    cell4.innerHTML = "<input name='nameofArticle' type='text' class='fields fieldstwo' id='nameofArticle'>";
    cell5.innerHTML = "<input readonly='readonly' id=total>"
}
function myDelete() {
    document.getElementById("myTable").deleteRow(1);
}

function sum()
{
var x = parseFloat(document.getElementById("price").value);
var y = parseFloat(document.getElementById("acceptedKgMeters").value);
var z = x + y;
document.getElementById("total").value = z ;
}
  </script>
  </html>

我已从第二列中删除onkeyup()并仅将其保留在第三列中，但它可以双向工作。

我还将表格生成更改为var row = table.insertRow(1); var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); var cell3 = row.insertCell(2); var cell4 = row.insertCell(3); var cell5 = row.insertCell(4);

因为它正在创建一种LIFO系统，导致寻址被颠倒。

如何将两个文本字段的值相加并在第三个textfiled中显示结果？

2 个答案: