Skip to content

Commit 46f683d

Browse files
trimentortrimentor
committed
jQuery tableSelect plugin with a small demo
0 parents  commit 46f683d

File tree

6 files changed

+559
-0
lines changed

6 files changed

+559
-0
lines changed

‎README

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
[jQuery tableSelect Plugin - Row Selection made easy

‎demo.html

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
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 &ndash; 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

Comments
 (0)