Question

我仍在尝试从单元格中收集信息，使用该信息执行函数，然后将结果返回到其他单元格。我知道这是可能的，但我有一个想要解决它的问题。我在这里收到的许多提示让我走上了一条道路，在那里我发现了一条以我理解的方式表达的信息。我希望这会再次发生 - 这让我疯狂。以下代码已在Liveweave上进行了测试，未显示任何错误。它仍然无法工作。有什么想法吗？

JAVACSCRIPT

calculate = function(){
var total1= (document.form[0].mark1.value) +(document.form[0].mark2.value) + (document.form[0].mark3.value);
  document.form[0].total.value = total1;
  return total1;
};

HTML

<form>
  <table>




    <tr>
      <th>Name</th>
      <th>Date</th>
      <th>Date</th>
      <th>Date</th>
      <th>Date</th>
      <th>Date</th>
      <th>Final</th>
    </tr>
    <tr>
      <td>Name1</td>
      <td class="mark1">34</td>
      <td class="mark2">77</td>
      <td class="mark3">99</td>
      <td>0</td>
      <td>0</td>
      <td class="total" placeholder="0">0</td>
    </tr>
  </table><br/>
<input type="button" value="Calculate" onclick="calculate"/>
<!-- End your code here -->
  </form>

非常感谢任何帮助。干杯，彼得

Answer 1

唯一具有value属性的DOM元素是表单字段（<input>，<textarea>，<select>）。您的示例中没有任何内容，因此您无法使用value来获取它们。

同样，您无法使用container.theClass访问具有类名的元素，因此document.form[0].mark1不会在您的表格中为您提供<td class="mark1">...</td>单元格。< / p>

要访问元素，主要工具是：

querySelector - 查找与容器中的CSS选择器匹配的第一个元素
querySelectorAll - 查找与容器中的CSS选择器匹配的所有元素
document.getElementById - 找到具有给定id值的一个元素

要在非表单单元格中获取文本（非值），您可以使用innerHTML（它为您提供HTML标记，但在您的情况下，这只是文本的号）。然后我们解析该文本以获得数字。

在您的示例中，我们可以使用document.querySelector(".mark1")和类似内容找到我们关心的元素。

function calculate(){
    var mark1 = document.querySelector(".mark1");
    var mark2 = document.querySelector(".mark2");
    var mark3 = document.querySelector(".mark3");
    var total = document.querySelector(".total");
    var sum   = parseInt(mark1.innerHTML, 10) +
                parseInt(mark2.innerHTML, 10) +
                parseInt(mark3.innerHTML, 10);
    total.innerHTML = String(sum);
}

请注意，这假设您只想使用第一个（仅）单元格。如果你有多个表单/表并希望在每个表单/表中工作，你可能想要稍微不同地做，可能是通过将表单元素传递给函数：

function calculate(form){
    var mark1 = form.querySelector(".mark1");
    var mark2 = form.querySelector(".mark2");
    var mark3 = form.querySelector(".mark3");
    var total = form.querySelector(".total");
    var sum   = parseInt(mark1.innerHTML, 10) +
                parseInt(mark2.innerHTML, 10) +
                parseInt(mark3.innerHTML, 10);
    total.innerHTML = String(sum);
}

请注意我使用的是form.querySelector而不是document.querySelector。这会找到第一个匹配元素，但只在表单中查找。因此，如果我们有三种形式，我们可以这样做：

var forms = document.querySelectorAll("form"); // Note the "All" var index; for (index = 0; index < forms.length; ++index) { calculate(forms[index]); }

Live copy with three forms （答案结尾处的来源）

这是使用类而不是id的原因。 id对于页面上唯一的内容很有用，但通常更喜欢使用类来提高灵活性。

侧点：请注意我是如何更改函数的创建方式的。以上是声明函数的常规方法。你正在做的是另一种方式，它使用表达式创建函数并将其赋值给变量。但是您没有声明变量，因此您的代码成为The Horror of Implicit Globals的牺牲品。如果您更喜欢使用表达式，请声明变量：

var calculate = function(){ var mark1 = document.querySelector(".mark1"); var mark2 = document.querySelector(".mark2"); var mark3 = document.querySelector(".mark3"); var total = document.querySelector(".total"); var sum = parseInt(mark1.innerHTML, 10) + parseInt(mark2.innerHTML, 10) + parseInt(mark3.innerHTML, 10); total.innerHTML = String(sum); };

三种形式的来源示例：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Example</title> </head> <body> <p>First form</p> <form> <table> <tr> <th>Name</th> <th>Date</th> <th>Date</th> <th>Date</th> <th>Date</th> <th>Date</th> <th>Final</th> </tr> <tr> <td>Name1</td> <td class="mark1">34</td> <td class="mark2">77</td> <td class="mark3">99</td> <td>0</td> <td>0</td> <td class="total">0</td> </tr> </table> </form> <p>Second form</p> <form> <table> <tr> <th>Name</th> <th>Date</th> <th>Date</th> <th>Date</th> <th>Date</th> <th>Date</th> <th>Final</th> </tr> <tr> <td>Name1</td> <td class="mark1">4</td> <td class="mark2">7</td> <td class="mark3">18</td> <td>0</td> <td>0</td> <td class="total">0</td> </tr> </table> </form> <p>Third form</p> <form> <table> <tr> <th>Name</th> <th>Date</th> <th>Date</th> <th>Date</th> <th>Date</th> <th>Date</th> <th>Final</th> </tr> <tr> <td>Name1</td> <td class="mark1">1</td> <td class="mark2">2</td> <td class="mark3">3</td> <td>0</td> <td>0</td> <td class="total">0</td> </tr> </table> </form> <div><input type="button" value="Calculate" onclick="calculate"></div> <script> function calculate(form){ var mark1 = form.querySelector(".mark1"); var mark2 = form.querySelector(".mark2"); var mark3 = form.querySelector(".mark3"); var total = form.querySelector(".total"); var sum = parseInt(mark1.innerHTML, 10) + parseInt(mark2.innerHTML, 10) + parseInt(mark3.innerHTML, 10); total.innerHTML = String(sum); } var forms = document.querySelectorAll("form"); // Note the "All" var index; for (index = 0; index < forms.length; ++index) { calculate(forms[index]); } </script> </body> </html>

Answer 2

使用ID与document.getElementById('id').innerHTML

一起使用

 var totalsum= parseInt(+document.getElementById('mark1').innerHTML) +      
parseInt(+document.getElementById('mark2').innerHTML) + 
  parseInt(+document.getElementById('mark3').innerHTML);


document.getElementById('total').innerHTML = totalsum.toString();

Answer 3

如果您要实现的是具有用户可更改字段的表单，而不仅仅是表格，那么您需要将名为input的s插入到html表格单元格中：

<td><input name="mark1" type="number" value="34" /></td>

然后，您可以按照您尝试的方式在javascript中访问表单的属性：

calculate = function () {
    var form = document.forms[0];
    form.total.value = Number(form.mark1.value) + Number(form.mark2.value) + Number(form.mark3.value);
});

请参阅此JSFiddle

Answer 4

我只需要看看我是否可以使用Javascript。此解决方案适用于找到的第一个表单，除了第一个表单之外的所有行，以及除每行的第一个和最后一个之外的所有单元格。您可以根据需要使用选择器。

哦，建议这个解决方案的原因是它是动态的 - 如果您不知道生成的列数或行数，那就很好了。此外，您可以在要包含在计算中的单元格上设置类，并为总体/总和单元格设置类，以便更简单地选择和IE兼容性。

function calculate() {
    // Select the first form.
    var form = document.querySelector("form");
    // Select all rows, except the first one, in the form.
    var rows = form.querySelectorAll("tr:not(:first-child)");
    for (var row_index = 0; row_index < rows.length; row_index++) {
        var sum = 0;
        // Select all cells, except the first and last ones, in the row.
        var cells = rows[row_index].querySelectorAll("td:not(:first-child):not(:last-child)");
        for (var cell_index = 0; cell_index < cells.length; cell_index++) {
            sum += parseInt(cells[cell_index].textContent, 10);
        }
        var total = rows[row_index].querySelector("td:last-child");
        total.textContent = sum;
    }
}

另外，请注意<input type="button" value="Calculate" onclick="calculate()" />中的函数call（）。

请参阅：http://jsfiddle.net/47Ngg/

第三次是魅力......也许吧

4 个答案: