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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
| $(document).ready(function() {
// the first step is to find all the tables on the page with
// a class of percentSort. These are all the tables we want to
// convert into our widget.
// After we find them, we need to loop through them and take some
// actions on them
// At the conclusion of this block of code, each table that's going to
// be a percentSort widget will have been transformed
$("table.percentSort").each(function(i){
// each table needs a unique ID, for namespace issues (discussed later)
// we can simply create a uniqueID from the loop counter
$(this).attr("id", "percentSort-"+i);
// within each table, let's highlight every other row in the table, to
// give it that "zebra" look
$(this).find("tbody > tr").filter(" dd").addClass("highlight");
// because each table needs to show the "Total" to the user, let's create a new
// section of the table in the footer. We'll add a row in the table footer
// to display the words "Total" and a span for the updated count.
$("#"+$(this).attr("id") + " tfoot")
.append("<tr><td>Total</td><td>
<span></span> %</td></tr>");
// finally, let's add the CLASS of "percentTotal" to the span we just
// created above. We'll use this information later to display
// the updated totals
$("#"+$(this).attr("id") + " tfoot span").addClass("percentTotal");
});
// now the second step, after we've completed setting up the tables themselves
// is to set up the individual table rows.
// We can similarly sort through each of them, taking the appropriate actions
// on each of them in turn.
// Upon completion of this block of code, each row in each table will be
// transformed for our widget
$("table.percentSort tbody > tr").each(function(i){
// get the namespace (to be discussed in the next section)
var NAMESPACE = $(this).parents("table.percentSort").attr("id");
// attach a unique ID to this row. We can use the loop counter
// to ensure the ID is unique on the page (which is a must on every page)
$(this).attr("id", "row"+i);
// now, within this row of the table, we need to find the text input, because
// we need to attach a class to them. We utilize the namespace, and also
// find the :text within the table row, and then attach the correct class
$("#"+$(this).attr("id") + " :text").addClass("percent");
// Finally, we attach a unique ID to each of the text inputs, and we do this by
// making it a combination of the table name and the row name.
$("#"+$(this).attr("id") + " .percent").
attr("id", NAMESPACE + "-" + $(this).attr("id"));
});
// Finally, because we know we only want numerical inputs, we restrict the text entry
// to just numbers. We must do this now, because up until this point, the page
// contained no elements with the CLASS "percent"
$(".percent").numeric();
|
