“选择”菜单中的 HTML 表单表中的总值

Total Value in HTML Form Table from Select Menu

本文关键字：表单 HTML 菜单 选择      更新时间：2023-09-26

>我有一个简单的HTML表单，其中一列有一个选择菜单，有两个选项：中等或高。我需要找到单元格="中等"的所有行，并计算同一行中另一个单元格的总数，并对单元格="高"的所有行重复此操作。下面是一个 JS 小提琴，显示了一个示例完成的表：

http://jsfiddle.net/8hn2H/

在此示例中，"总体中等"的结果为 1.6，"总体高"的结果为 8.7（它是"平均小时/周"列中的值的总和）。行数不会提前固定 - 可能有 1 行或更多。

以下是表单的实际 html：

<div class="span8"><br>
      <table id="activities" class="table table-bordered table-striped">
        <thead>
          <tr>
            <th>Activity</th>
            <th>Risk</th>
            <th>Hours/Week</th>
            <th>Weeks/Year</th>
            <th>Average Hours/Week</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><input name="Activity"  id="Activity" type="text" value=""/></td>
            <td><div class="controls">
              <select id="Risk">
                <option></option>
                <option>Moderate</option>
                <option>High</option>
              </select>
            </div></td>
            <td><input class="span1" id="A1" type="text" value=""/></td>
            <td><input class="span1" id="B1" type="text" value=""/></td>
            <td><input class="span1" id="C1" type="text" value=""/></td>
            <td><button class="btn">Delete Activity</button></td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>Total Moderate</td>
            <td></td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>Total High</td>
            <td></td>
          </tr>
        </tbody>
      </table>
    </div>

var moderateTotal = 0;
var highTotal = 0;
$("#activities").find("tr").each(function() {
    var tr = $(this);
    var level = tr.find("td:nth-child(2)").html();
    var value = tr.find("td:nth-child(5)").html();
    switch(level)
    {
        case "Moderate":
            moderateTotal += value*1;
        break;
        case "High":
            highTotal += value*1;
        break;
    }
});
$("#activities tr:last td:last").prev().html("High Total: " + highTotal);
$("#activities tr:last").prev().find("td:last").prev().html("Moderate Total: " + moderateTotal);

我使用 jQuery 的 .find() 和 .each() 函数来迭代每一行。我再次使用 find 来查找级别和值（第 2 列和第 5 列），并使用 switch 语句将值添加到总计中。我需要做value*1将字符串转换为整数，以便它添加。此处的默认行为是串联的。

最后两行设置表格单元格的值。如果你能给它们一个特定的 ID，这样你就可以做$("moderateTotal").html()，那会容易得多，但由于没有给出，我使用了一些 jQuery 选择器来做到这一点。

演示

有很多方法可以解决这个问题，但我强烈建议你考虑jQuery DataTables。 它具有用于对字段求和、排序、过滤等的内置功能，并且比必须自制的东西要容易得多。 另外，它看起来比一个完全支持Themeroller的裸桌子要好得多。

下面是一个简单的示例，其中包含用于执行求和的页脚回调：http://datatables.net/release-datatables/examples/advanced_init/footer_callback.html

由于表中的所有数据都可以通过 API 完全使用，因此很容易对其进行数学运算。 您可以 - 可以 - 简单地根据中等或高标志过滤表并仅显示该数据，允许用户动态修改该视图。

而且，如果你的数据变得很长，它有分页和ajax加载选项来提高用户级别的速度。

相关文章：