1
+ <!DOCTYPE HTML>
2
+ < html >
3
+ < head >
4
+ < title > jQuery tableSelect Plugin</ title >
5
+ <!-- <script type="text/javascript" src="jquery-1.2.min.js"></script> -->
6
+ < script type ="text/javascript " src ="jquery-1.4.3.min.js "> </ script >
7
+ < script type ="text/javascript " src ="jquery.tableSelect.min.js "> </ script >
8
+ <!-- <script type="text/javascript" src="jquery.tableSelect.js"></script> -->
9
+ < style type ="text/css ">
10
+ table {
11
+ border : 1px solid black;
12
+ border-collapse : collapse;
13
+ width : 200px ;
14
+ }
15
+
16
+ th , td {
17
+ border-bottom : 1px solid black;
18
+ cursor : pointer;
19
+ text-align : left;
20
+ }
21
+
22
+ th {
23
+ background-color : lightgrey;
24
+ }
25
+
26
+ tr .selected > * {
27
+ background-color : # FFFF00 ;
28
+ }
29
+ </ style >
30
+ </ head >
31
+
32
+ < body >
33
+ < h1 > jQuery tableSelect Plugin – Row Selection made easy</ h1 >
34
+
35
+ < ol >
36
+ < li > < strong > Current Version:</ strong > 1.0.0</ li >
37
+ < li > < strong > Compressed Filesize:</ strong > 3025 bytes</ li >
38
+ < li > < strong > License:</ strong > MIT/GPL</ li >
39
+ </ ol >
40
+
41
+ < h2 > Dependencies</ h2 >
42
+ < h3 > Required</ h3 >
43
+ < ul >
44
+ < li > < a href ="http://jquery.com/ "> jQuery 1.2+ (< em > jQuery 1.4.3 recommended</ em > )</ a > </ li >
45
+ </ ul >
46
+
47
+ < h2 > tableSelectOne()</ h2 >
48
+ < table id ="tableSelectOne ">
49
+ < thead >
50
+ < tr >
51
+ < th > </ th >
52
+ < th > Description</ th >
53
+ </ tr >
54
+ </ thead >
55
+ < tbody >
56
+ < tr >
57
+ < td > < input type ="radio " name ="one " /> </ td >
58
+ < td > Example 1</ td >
59
+ </ tr >
60
+ < tr >
61
+ < td > < input type ="radio " name ="two " /> </ td >
62
+ < td > Example 2</ td >
63
+ </ tr >
64
+ < tr >
65
+ < td > < input type ="radio " name ="three " /> </ td >
66
+ < td > Example 3</ td >
67
+ </ tr >
68
+ < tr >
69
+ < td > < input type ="radio " name ="four " /> </ td >
70
+ < td > Example 4</ td >
71
+ </ tr >
72
+ < tr >
73
+ < td > < input type ="radio " name ="five " /> </ td >
74
+ < td > Example 5</ td >
75
+ </ tr >
76
+ </ tbody >
77
+ </ table >
78
+
79
+ < script type ="text/javascript ">
80
+ $ ( document ) . ready ( function ( ) {
81
+ var tableOne = $ ( "#tableSelectOne" ) . tableSelectOne ( ) ;
82
+ $ ( "#tableSelectOne input" ) . each ( function ( ) { this . checked = null ; } ) ;
83
+
84
+ $ ( document ) . bind ( 'rowchange' , function ( event , table ) {
85
+ if ( tableOne == table ) {
86
+ var row = table . lastActive ( ) ;
87
+ table . isSelected ( row ) ?
88
+ $ ( row ) . find ( 'input' ) . attr ( 'checked' , 'checked' ) :
89
+ $ ( row ) . find ( 'input' ) . removeAttr ( 'checked' ) ;
90
+ }
91
+ } ) ;
92
+ } ) ;
93
+ </ script >
94
+
95
+ < h2 > tableSelectMany()</ h2 >
96
+ < table id ="tableSelectMany ">
97
+ < thead >
98
+ < tr >
99
+ < th > < input id ="tableManyCbAll " type ="checkbox " name ="all " /> </ th >
100
+ < th > Description</ th >
101
+ </ tr >
102
+ </ thead >
103
+ < tbody >
104
+ < tr >
105
+ < td > < input type ="checkbox " name ="one " /> </ td >
106
+ < td > Example 1</ td >
107
+ </ tr >
108
+ < tr >
109
+ < td > < input type ="checkbox " name ="two " /> </ td >
110
+ < td > Example 2</ td >
111
+ </ tr >
112
+ < tr class ="three ">
113
+ < td > < input type ="checkbox " name ="three " /> </ td >
114
+ < td > Example 3</ td >
115
+ </ tr >
116
+ < tr >
117
+ < td > < input type ="checkbox " name ="four " /> </ td >
118
+ < td > Example 4</ td >
119
+ </ tr >
120
+ < tr >
121
+ < td > < input type ="checkbox " name ="five " /> </ td >
122
+ < td > Example 5</ td >
123
+ </ tr >
124
+ </ tbody >
125
+ </ table >
126
+
127
+ < script type ="text/javascript ">
128
+ $ ( document ) . ready ( function ( ) {
129
+ var tableMany = $ ( "#tableSelectMany" ) . tableSelectMany ( ) ;
130
+ $ ( "#tableSelectMany input" ) . each ( function ( ) { this . checked = null ; } ) ;
131
+
132
+ // Select/Deselect all rows
133
+ $ ( "input#tableManyCbAll" ) . bind ( "click" , function ( ) {
134
+ this . checked ? tableMany . selectAll ( ) : tableMany . clearSelections ( ) ;
135
+ } ) ;
136
+
137
+ // Do something once a row has changed
138
+ $ ( document ) . bind ( 'rowchange' , function ( event , table ) {
139
+ if ( tableMany == table ) {
140
+ var row = table . lastActive ( ) ;
141
+ table . isSelected ( row ) ?
142
+ $ ( row ) . find ( 'input' ) . attr ( 'checked' , 'checked' ) :
143
+ $ ( row ) . find ( 'input' ) . removeAttr ( 'checked' ) ;
144
+
145
+ table . allSelected ( ) ?
146
+ $ ( "input#tableManyCbAll" ) . attr ( 'checked' , 'checked' ) :
147
+ $ ( "input#tableManyCbAll" ) . removeAttr ( 'checked' ) ;
148
+ }
149
+ } ) ;
150
+ } ) ;
151
+ </ script >
152
+ </ body >
153
+ </ html >
0 commit comments