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

Question

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

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>

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

演示

Answer 2

有很多方法可以解决这个问题，但我强烈建议您考虑使用jQuery DataTables。 它具有内置功能，可以对字段进行求和，排序，过滤等，并且比家庭酿造更容易。 此外，它看起来远远好于只有一个完整的Themeroller支持的裸桌。

这是一个简单的示例，使用页脚回调来执行求和： http ： //datatables.net/release-datatables/examples/advanced_init/footer_callback.html

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

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