0

我有一个简单的 HTML 表单，其中有一列有一个带有 2 个选项的选择菜单：中等或高。我需要找到单元格 =“中等”的所有行并计算同一行中另一个单元格的总数，并对单元格 =“高”的所有行重复此操作。这是一个 JS Fiddle，显示了一个完整的示例表：

http://jsfiddle.net/8hn2H/

在此示例中，Total Moderate 的结果为 1.6，Total High 的结果为 8.7（它是 Average Hours/Week 列中的值的总和）。行数不会预先固定 - 可能有 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>
4

2 回答 2

1 
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 选择器来做到这一点。

演示

于 2012-06-12T15:10:55.487 回答
1

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

这是一个带有页脚回调的简单示例：http: //datatables.net/release-datatables/examples/advanced_init/footer_callback.html

因为表中的所有数据都可以通过 API 完全提供给您，所以很容易对其进行数学运算。您 -- 可以 -- 简单地根据中等或高标志过滤表并仅显示该数据，从而允许用户即时修改该视图。

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

于 2012-06-12T15:30:42.153 回答