Question

请帮我解决这个问题。我有以下Javascript：

function calc() {
  var table = document.getElementById(tableNum);
  var rowCount = table.rows.length;
  for (var i = 0; i < rowCount; i++) {
    var totalNum[i] = document.formNum.txt1[i].value * document.formNum.txt2[i].value;
    document.getElementById('totalCalc[' + i + ']').innerHTML = totalNum;
  }
}

HTML就像这样：

<table id="tableNum">    
<form name="formNum" action="" id="formNum">
<tr>
<td><input type="text" name="txt1[]" onkeyup="calc()"/></td>
<td><input type="text" name="txt2[]" onkeyup="calc()"/></td>
<td><span id="totalCalc[]"></span></td>
</tr>
</form>
</table>

输入字段的数量未知。没有错误，但totalCalc字段为空。请告诉我我做错了什么。感谢。

编辑：对不起，我忘了提及输入字段都在表格中。请检查编辑过的代码。感谢。

编辑：我实际上正在制作一个演示，其中表行数由用户定义，方法是单击插入行按钮。

编辑：感谢Travis的代码。经过一些更改后，代码现在正在运行。但只有第一行正在运行。我想要获取行的长度并使用for循环的文本字段。 <input type="text" name="txt1[<?php echo $rowLength;?>]" onkeyup="calc()"/>有没有人有其他想法？感谢。

Answer 1

第一件事似乎是错误的

document.getElementById(tableNum);

应该是

document.getElementById("tableNum");

其次，

var totalNum[i] =

应该是

var totalNum =

此外，它不起作用，您可以通过firebug或chrome的集成开发人员工具进行调试，快速找到它。这也将帮助您进行语法验证。

Answer 2

这是正在发生的事情。

HTML首先

如果您要通过索引引用这些，请使用适当的索引，例如

name="txt1[0]"
name="txt2[0]"
<span id="totalCalc[0]">

<强>的Javascript

document.getElementById(tableNum);

getElementsById需要一个字符串，所以这应该是

document.getElementById("tableNum");

由于你在迭代，你只需要其中一个变量，因为它是立即使用的（不是整个数组）：

var totalNum =代替var totalNum[i]

当您使用点表示法访问表单时，名称中的括号会混淆，您需要这样做：

document.formNum["txt1["+i+"]"].value代替document.formNum.txt1[i].value

<强> Vuala

当您进行这些微小更改时，您使用的代码实际上会产生正确的结果:)请参阅此工作演示：http://jsfiddle.net/69Kj7/，此处是一个包含2行的演示：http://jsfiddle.net/69Kj7/1/

作为参考，这是演示中的代码：

HTML：

<table id="tableNum">    
<form name="formNum" action="" id="formNum">
<tr>
<td><input type="text" name="txt1[0]" onkeyup="calc()"/></td>
<td><input type="text" name="txt2[0]" onkeyup="calc()"/></td>
<td><span id="totalCalc[0]"></span></td>
</tr>
</form>
</table>

JS：

function calc() {
 var table = document.getElementById("tableNum");
 var rowCount = table.rows.length;
 for (var i = 0; i < rowCount; i++) {
  var totalNum = document.formNum["txt1["+i+"]"].value * document.formNum["txt2["+i+"]"].value;
  document.getElementById('totalCalc[' + i + ']').innerHTML = totalNum;
 }
}

Answer 3

如果你想使用纯java脚本，这里是逻辑代码

HTML

<form name="formNum" id="formNum" action="" >
<input type="text" name="foo[]" onkeyup="calc()" value="5"/>
<input type="text" name="foo[]" onkeyup="calc()" value="12"/>
<span id="totalCalc"></span>
</form>

JS

var inputs = formNum["foo[]"];
var total = 1;
alert(inputs.length);
for (var i = 0; i < inputs.length; i++) {
    total *= inputs[i].value;
}

alert(total);

working DEMO

Answer 4

我已经想出如何解决这个问题。只需在totalCalc之后插入数组，但不能在totalCalc内插入。

非常感谢你们帮助我：）

使用Javascript循环表单输入字段

4 个答案:

HTML

JS