Question

好吧，我会再试一次，不好。

我正在尝试构建一个非常简单的php发票系统，仅用于输入数据，将其写入数据库，最后将Info发送到文件进行打印。我不喜欢的问题，除了对javascript一个新手，从多行项目和总计获得总计。我将发布我已经开始使用的页面

<script type="text/javascript">
function add()
{
var a = parseInt(document.frm.A.value);
var b = parseInt(document.frm.B.value);
var result = parseInt(document.frm.Result.value);
var result=a*b;
document.frm.Result.value=result;
}
</script>
<style type="text/css">
body,td,th {
    font-family: Arial, Helvetica, sans-serif;
    color: #FFF;
}
body {
    background-color: #000;
}
</style>

HTML：

<form name="frm">
 <p>&nbsp;</p>

<table width="66%" border="1">
<tr bgcolor="#B80000">
<td width="60%"><div align="center">Item Description</div></td>
<td width="11%"><div align="center">Price Per</div></td>
<td width="15%"><div align="center">Quantity</div></td>
<td width="14%"><div align="center">SubTotal</div></td>
</tr>
<tr>
<td><div align="center">
  <input name="item" type="Text" id="item" size="100" >
</div></td>
<td><div align="center">
  <input name="A" type="Text" id="A" onChange="add()" size="5" >
</div></td>
<td><div align="center">
  <input name="B" type="Text" id="B" onChange="add()" size="5" >
</div></td>
<td><div align="center">
  <input name="Result" type="Text" id="Result" size="8" >
</div></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
<td><div align="center">
TOTAL:
  <input name="Total" type="Text" id="Total" size="8">
</div></td>
</tr>
</table>
</form>

所以我试图找出如何从SubTotal列获取总数并将其在TOTAL字段中求和。如果我有多行，我需要将所有小计加在一起。已经工作了好几天，无法弄明白。

如果我以这种方式设置多行：

  <form name="frm">
  <p>&nbsp;</p>

  <table width="66%" border="1">
  <tr bgcolor="#B80000">
  <td width="60%"><div align="center">Item Description</div></td>
  <td width="11%"><div align="center">Price Per</div></td>
  <td width="15%"><div align="center">Quantity</div></td>
  <td width="14%"><div align="center">SubTotal</div></td>
  </tr>
  <tr>
  <td><div align="center">
  <input name="item" type="Text" id="item" size="100" >
  </div></td>
  <td><div align="center">
  <input name="A" type="Text" id="A" onChange="Adder()" size="5" >
  </div></td>
  <td><div align="center">
  <input name="B" type="Text" id="B" onChange="Adder()" size="5" >
  </div></td>
  <td><div align="center">
  <input name="Result" type="Text" id="Result" size="8" >
  </div></td>
  </tr>
  <tr>
  <td><div align="center">
  <input name="item2" type="Text" id="item2" size="100" >
  </div></td>
  <td><div align="center">
  <input name="A2" type="Text" id="A2" onChange="Adder()" size="5" >
  </div></td>
  <td><div align="center">
  <input name="B2" type="Text" id="B2" onChange="Adder()" size="5" >
  </div></td>
  <td><div align="center">
  <input name="Result2" type="Text" id="Result2" size="8" >
  </div></td>
  </tr>
  <tr>
  <td><div align="center">
  <input name="item3" type="Text" id="item3" size="100" >
  </div></td>
  <td><div align="center">
  <input name="A3" type="Text" id="A3" onChange="Adder()" size="5" >
  </div></td>
  <td><div align="center">
  <input name="B3" type="Text" id="B3" onChange="Adder()" size="5" >
  </div></td>
  <td><div align="center">
  <input name="Result3" type="Text" id="Result3" size="8" >
  </div></td>
  </tr>
  <tr>
  <td><div align="center"></div></td>
  <td><div align="center"></div></td>
  <td><div align="center"></div></td>
  <td><div align="center">
  TOTAL: 
  <input name="Total" type="Text" id="Total" size="8" onChange="Adder()" >
  </div></td>
  </tr>
  </table>
  </form>

当我添加其他元素时，javascript会工作吗？或者我的方向是错误的

Answer 1

从您当前代码的角度来看，以下内容可行：

function add() {
    var a = parseInt(document.frm.A.value);
    var b = parseInt(document.frm.B.value);
    var result = parseInt(document.frm.Result.value); // <-- This line is unnecessary
    var result = a * b;
    document.frm.Result.value = result;
    document.frm.Total.value = result; // I added this line
}

已编辑：我提出了一种稍微麻烦的方法，可以按如下方式对多行进行缩放。

为每个行及其结果对提供特定的ID，如下所示：

<input name="A" type="Text" id="A1" onChange="add(1)" size="5" />
<!-- ... -->
<input name="B" type="Text" id="B1" onChange="add(1)" size="5" />
<!-- ... -->
<input name="Result" type="Text" id="Result1" size="8" />

（下一行将添加数字2，上面有1）

然后您可以使用以下js：

function add(row) {
    var a = parseInt(document.getElementById('A'+row).value);
    var b = parseInt(document.getElementById('B'+row).value);
    if (a > 0 && b > 0) {
        document.getElementById('Result'+row).value = a * b;
        document.getElementById('Total').value = parseInt(document.getElementById('Result1').value) + parseInt(document.getElementById('Result2').value);
    }
}

我确信这可以通过更好的方式完成，但我相信这是一个很好的开始......

您可以 play with a demo 。

Answer 2

尝试：

function add(){
  var table = document.getElementsByTagName('table')[0];
  var tr = table.getElementsByTagName('tr'), sum = 0;
  for(var i=1,l=tr.length; i<l; i++){
    var inputs = tr[i].getElementsByTagName('input'), sub = 1;
    for(var n=1; n<3; n++){
      sub *= inputs[n].value;
    }
    sum += inputs[3].value = sub;
  }
  totalNode.innerHTML = sum;
}

将totalNode与您想要的总数进行交换。我实际上并不会使用输入作为小计，但这需要我重写此功能。我也不建议通常将JavaScript放入你的HTML中。你会学到的。

建立一个javascript发票系统

2 个答案: