使用 javascript 中的 for 循环总结 html 表格列的值答案

【问题标题】：Sum up the values of a html table column using a for loop in javascript使用 javascript 中的 for 循环总结 html 表格列的值
【发布时间】：2016-09-19 07:52:38
【问题描述】：

我有一个包含 2 列的 HTML 表格，这些表格由 ajax php 查询更新。这一切都很好，但我想在每次表格获得新条目时总结右列(Your Calories)。

对于总值，我创建了一个只有一行和两列的新表。

我第一次单击添加按钮时，虽然“你的卡路里”列中已经有一个值，但总数为 0。如果我在表中添加第二行，它会返回第一个条目的值。如果我在表格中添加第三行，它会将第一行和第二行相加。所以总是缺少一行，我不明白为什么......

这是我的html代码：

<input id="food" name="food" value="Choose your Food">
<input id="amount" value="Choose the amount in gram" name="amount">
<input type="button" value="Add" id="submit" name="submit" />

<div id="update_div">
<table id="mytable">
  <tr>
    <th>Your Food</th>
    <th>Your Calories</th>
  </tr>
</table>
</div>

<table>
   <tr>
    <td>Your Total</td>
    <td id="total"></td>
  </tr>
</table>

我的 javascript 代码：

$( document ).ready(function() {
    $("#submit").click(function() {


        <!-- WORKS FINE SO FAR -->

        var food = $("#food").val();
        var amount = $("#amount").val();
        $.ajax({
            url: 'search_value.php?food='+ food + '&amount='+amount,
            type: 'GET',
            datatype: "html",   
            success: function(data)
            {
                $('#update_div table').append(data);
            },
        });

        <!-- THIS IS THE PART, WHICH DOES NOT WORK CORRECTLY -->

        var sum = 0;
        var table = document.getElementById("mytable");
        var ths = table.getElementsByTagName('th');
        var tds = table.getElementsByTagName('td');
        for(var i=0;i<tds.length;i++){
            sum += isNaN(tds[i].innerText) ? 0 : parseInt(tds[i].innerText);
        }
        document.getElementById("total").innerHTML = sum;

    });
});

还有我的 PHP 代码：

<?php
    //database configuration
    $pdo = new PDO('mysql:host=localhost;dbname=calotools', 'root', '');

    $food = $_GET['food'];
    $amount = $_GET['amount'];

    $query="SELECT * FROM nahrungsmittel WHERE name = '$food'";

    $user = $pdo->query($query)->fetch();
    echo "<tr>";
    echo "<td>".$user['name']."</td>";
    echo "<td>".$user['kcal'] / 100 * $amount."</td>";
    echo "</tr>";
?>

也许你们看到了问题？我不知道这是否是按列的值总结列的最佳做法，但这是迄今为止对我有用的唯一方法。

【问题讨论】：

ajax 是异步的。在成功处理程序中插入数据之前无法进行计算
好的。所以我想我必须创建一个按钮来添加条目，再创建一个按钮来总结列。
不..你需要在数据被接收并插入后进行求和。将该代码放在success 和append 之后
不错。完美运行！非常感谢！

标签： javascript php jquery html for-loop

【解决方案1】：

通过将“总结代码”放入成功处理程序中来工作。感谢 charlietfl！

$( document ).ready(function() {
    $("#submit").click(function() {
        var food = $("#food").val();
        var amount = $("#amount").val();
        $.ajax({
            url: 'search_value.php?food='+ food + '&amount='+amount,
            type: 'GET',
            datatype: "html",   
            success: function(data)
            {
                $('#update_div table').append(data);

                var sum = 0;
                var table = document.getElementById("mytable");
                var ths = table.getElementsByTagName('th');
                var tds = table.getElementsByTagName('td');
                for(var i=0;i<tds.length;i++){
                    sum += isNaN(tds[i].innerText) ? 0 : parseInt(tds[i].innerText);
                }
                document.getElementById("total").innerHTML = sum;
            },
        });
});

【讨论】：