1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
| // Set up the table that contains the widget.
// Note that we add a class to it called
// "percentSimple", which will be used in the jQuery
// code, as well as adding a unique
// ID to the table "sortTable1".
// Also note that each text field that will have a percent
// typed into it has the
// class of "percent" added to it.
// Finally, note in the table footer a field called "percentTotal"
<p><table width=300 class="percentSimple" cellpadding=0 cellspacing=0 id=sortTable1>
<tbody>
<tr><td class="left">
S&P 500 Index
</td>
<td>
<input type=text class="percent textfield"> %
</td>
</tr>
.......
<tfoot>
<tr><td>
Total
</td>
<td>
<span class=percentTotal></span> %
</td>
</tr>
</tfoot>
// take advantage of our previous plug-in and limit the percent fields
// to just numbers
$(".percent").numeric();
// capture any keyup events from all the "percent" fields
// when these occur, we are going to recalculate the total percent
$("table.percentSimple input.percent").keyup(function(){
// figure out which table this occurred in (in case there's more than
// 1 widget on a page
var table = $(this).parents().filter("table.percentSimple");
var ID = table.attr("id");
// Find the sum of all the "percent" fields, by using
// our calculation plug-in
var sum = $("#" + ID + " input.percent").sum();
// cache the span called "percentTotal"
var totalField = $("#" + ID + " .percentTotal");
// update the total in the "percentTotal" field
totalField.html(sum);
// if the sum != 100%, then we'll attach an error to it
if (sum != 100 && sum != 0)
{
totalField.addClass("error");
}
else
{
totalField.removeClass("error");
}
});
|
清单 10. Calculation 插件