Javascript 第三次'；这是一种魅力……也许吧_Javascript

Javascript 第三次'；这是一种魅力……也许吧

javascript

Javascript 第三次'；这是一种魅力……也许吧,javascript,Javascript,我仍然在尝试从单元格中收集信息，用这些信息执行一个函数，然后将结果返回到另一个单元格。我知道这是有可能的，但我正费了好大劲想弄明白。我在这里收到的许多提示引导我走上了一条道路，在那里我发现了一块以我理解的方式表达的信息。我希望这种情况会再次发生——这让我发疯。以下代码已在Liveweave上测试，未显示任何错误。但它仍然不起作用。你知道为什么吗 JAVACSCRIPT calculate = function(){ var total1= (document.form[0].mark1.val

我仍然在尝试从单元格中收集信息，用这些信息执行一个函数，然后将结果返回到另一个单元格。我知道这是有可能的，但我正费了好大劲想弄明白。我在这里收到的许多提示引导我走上了一条道路，在那里我发现了一块以我理解的方式表达的信息。我希望这种情况会再次发生——这让我发疯。以下代码已在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>


名称
日期
日期
日期
日期
日期
最终的
名称1
34
77
99
0
0
0

任何帮助都将不胜感激。干杯

Peter

只有表单字段（

，

）是具有

值的DOM元素。示例中没有任何值，因此无法使用value
获取它们
类似地，您无法通过使用容器访问具有类名的元素。类
，因此文档.form[0]。mark1
不会在表单的表中为您提供…
单元格
要访问元素，主要工具有：

-在容器中查找与CSS选择器匹配的第一个元素
-在容器中查找与CSS选择器匹配的所有元素
-找到具有给定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]);
}


三种形式示例的来源：
<!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>


例子
第一种形式
名称
日期
日期
日期
日期
日期
最终的
名称1
34
77
99
0
0
0
第二种形式
名称
日期
日期
日期
日期
日期
最终的
名称1
4.
7.
18
0
0
0
第三种形式
名称
日期
日期
日期
日期
日期
最终的
名称1
1.
2.
3.
0
0
0
函数计算（表格）{
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=字符串（总和）；
}
var forms=document.querySelectorAll（“表单”）；//注意“全部”
var指数；
对于（索引=0；索引
使用id与文档一起使用。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();

如果您试图实现的是一个具有用户可更改字段的表单，而不仅仅是一个表，那么您需要将命名的input
s插入html表格单元格：
<td><input name="mark1" type="number" value="34" /></td>

看看这个
我只是想看看是否可以用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;
    }
}

函数计算（）{
//选择第一个表单。
var form=document.querySelector（“表单”）；
//选择表单中除第一行以外的所有行。
var rows=form.querySelectorAll（“tr:not（：first child）”；
对于（变量行索引=0；行索引

另外，请注意
中的函数调用（）
请看：
我们不必在结尾将其设置为字符串total.innerHTML=sum
@soktinpk:我们不必这样做，因为它会隐式发生。我强调了我们处理字符串的事实，非常详细。非常感谢。我现在还有几个小时的时间“试着弄明白”在我前面。我走那条路很慢。非常感谢你的回答。@PeterJ:不用担心，玩得开心！我添加了一个示例，显示了应用于同一页面上三个表单的代码（使用类而不是ids的价值）？我做过类似的事情（成功）
calculate = function () {
    var form = document.forms[0];
    form.total.value = Number(form.mark1.value) + Number(form.mark2.value) + Number(form.mark3.value);
});

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