0

私は、中または高の 2 つのオプションを持つ選択メニューを持つ 1 つの列を持つ単純な HTML フォームを持っています。セルが「中」のすべての行を見つけて、同じ行の別のセルの合計を数え、セルが「高」のすべての行に対してこれを繰り返す必要があります。完成したテーブルのサンプルを示す 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文字列を整数に変換して追加する必要があります。ここでのデフォルトの動作は連結です。

最後の 2 行は、表のセルの値を設定します。それらに特定のIDを与えることができれば、はるかに簡単になります$("moderateTotal").html()が、それが与えられなかったので、いくつかのjQueryセレクターを使用してそれを行いました。

デモ

于 2012-06-12T15:10:55.487 に答える
1

これを攻撃する方法はいくつかありますが、jQuery DataTables を検討することを強くお勧めします。フィールドの合計、並べ替え、フィルタリングなどの機能が組み込まれており、何かを自作するよりもはるかに簡単です。さらに、Themeroller を完全にサポートする単なるテーブルよりもはるかに見栄えがします。

合計を行うためのフッターコールバックを使用した簡単な例を次に示します。

テーブル内のすべてのデータは API を介して完全に利用できるため、簡単に計算できます。中程度または高いフラグに基づいてテーブルをフィルタリングし、そのデータのみを表示して、ユーザーがそのビューをその場で変更できるようにすることができます。

また、データが非常に長くなった場合は、ユーザーのレベルで速度を向上させるためのページングおよび ajax 読み込みオプションがあります。

于 2012-06-12T15:30:42.153 に答える