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

时间:2012-06-12 15:02:01

标签: javascript jquery html

我有一个简单的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>

2 个答案:

答案 0 :(得分: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选择器来做它。

Demo

答案 1 :(得分:1)

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

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

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

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