Revision: 25506
Updated Code
at April 1, 2010 02:41 by nijgnet
Updated Code
// Select "All" functionality
$('#schedule-table').each(function()
{
var rows = $('#schedule-table tbody tr');
var rowsCnt = $(rows).size();
var i = 0; var j = 0;
// enumerate rows
$(rows).each(function() {
$(this).attr('title', ++i);
var k = 0;
// enumerate cols
$(this).find('td').each(function () {
$(this).attr('title', ++k);
});
});
// enumerate the links
$(rows).eq(rowsCnt-1).find('a').each(function() {
$(this).attr('title', ++j);
});
// links functionality
$('#schedule-table td a').bind('click', function()
{
var thisrow = $(this).parents('tr').find('td');
// toggle the rows
if ($(thisrow).size()-1 == 7)
{
$(thisrow).find('input[type=checkbox]').checkBox('changeCheckStatus', true);
}
// toggle the columns
if (parseInt($(this).parents('tr').attr('title')) == rowsCnt)
{
var thiscol = parseInt($(this).attr('title'));
$(rows).find('td[title='+thiscol+'] input[type=checkbox]').checkBox('changeCheckStatus', true);
}
});
});
/*** HTML ******************************/
<table id="schedule-table">
<thead>
<tr>
<th scope="col"></th>
<th scope="col">S</th>
<th scope="col">M</th>
<th scope="col">T</th>
<th scope="col">W</th>
<th scope="col">Th</th>
<th scope="col">F</th>
<th scope="col">Sa</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Morning</th>
<td><input type="checkbox" name="" value="" class="form-checkbox" /></td>
<td><input type="checkbox" name="input3" value="" class="form-checkbox" /></td>
<td><input type="checkbox" name="input6" value="" class="form-checkbox" /></td>
<td><input type="checkbox" name="input9" value="" class="form-checkbox" /></td>
<td><input type="checkbox" name="input12" value="" class="form-checkbox" /></td>
<td><input type="checkbox" name="input15" value="" class="form-checkbox" /></td>
<td><input type="checkbox" name="input18" value="" class="form-checkbox" checked="checked" /></td>
<td><a>All</a></td>
</tr>
<tr>
<th scope="row">Afternoon</th>
<td><input type="checkbox" name="input" value="" class="form-checkbox" /></td>
<td><input type="checkbox" name="input4" value="" class="form-checkbox" /></td>
<td><input type="checkbox" name="input7" value="" class="form-checkbox" checked="checked" /></td>
<td><input type="checkbox" name="input10" value="" class="form-checkbox" /></td>
<td><input type="checkbox" name="input13" value="" class="form-checkbox" /></td>
<td><input type="checkbox" name="input16" value="" class="form-checkbox" /></td>
<td><input type="checkbox" name="input19" value="" class="form-checkbox" checked="checked" /></td>
<td><a>All</a></td>
</tr>
<tr>
<th scope="row">Evening</th>
<td><input type="checkbox" name="input2" value="" class="form-checkbox" /></td>
<td><input type="checkbox" name="input5" value="" class="form-checkbox" /></td>
<td><input type="checkbox" name="input8" value="" class="form-checkbox" checked="checked" /></td>
<td><input type="checkbox" name="input11" value="" class="form-checkbox" checked="checked" /></td>
<td><input type="checkbox" name="input14" value="" class="form-checkbox" checked="checked" /></td>
<td><input type="checkbox" name="input17" value="" class="form-checkbox" /></td>
<td><input type="checkbox" name="input20" value="" class="form-checkbox" checked="checked" /></td>
<td><a>All</a></td>
</tr>
<tr>
<th scope="row"></th>
<td><a>All</a></td>
<td><a>All</a></td>
<td><a>All</a></td>
<td><a>All</a></td>
<td><a>All</a></td>
<td><a>All</a></td>
<td><a>All</a></td>
<td></td>
</tr>
</tbody>
</table>
Revision: 25505
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
at April 1, 2010 02:39 by nijgnet
Initial Code
// Select "All" functionality
$('#schedule-table').each(function()
{
var rows = $('#schedule-table tbody tr');
var rowsCnt = $(rows).size();
var i = 0; var j = 0;
// enumerate rows
$(rows).each(function() {
$(this).attr('title', ++i);
var k = 0;
// enumerate cols
$(this).find('td').each(function () {
$(this).attr('title', ++k);
});
});
// enumerate the links
$(rows).eq(rowsCnt-1).find('a').each(function() {
$(this).attr('title', ++j);
});
// links functionality
$('#schedule-table td a').bind('click', function()
{
var thisrow = $(this).parents('tr').find('td');
// toggle the rows
if ($(thisrow).size()-1 == 7)
{
$(thisrow).find('input[type=checkbox]').checkBox('changeCheckStatus', true);
}
// toggle the columns
if (parseInt($(this).parents('tr').attr('title')) == rowsCnt)
{
var thiscol = parseInt($(this).attr('title'));
$(rows).find('td[title='+thiscol+'] input[type=checkbox]').checkBox('changeCheckStatus', true);
}
});
});
/*** HTML ******************************/
<table id="schedule-table">
<thead>
<tr>
<th scope="col"></th>
<th scope="col">S</th>
<th scope="col">M</th>
<th scope="col">T</th>
<th scope="col">W</th>
<th scope="col">Th</th>
<th scope="col">F</th>
<th scope="col">Sa</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Morning</th>
<td><input type="checkbox" name="" value="" class="form-checkbox" /></td>
<td><input type="checkbox" name="input3" value="" class="form-checkbox" /></td>
<td><input type="checkbox" name="input6" value="" class="form-checkbox" /></td>
<td><input type="checkbox" name="input9" value="" class="form-checkbox" /></td>
<td><input type="checkbox" name="input12" value="" class="form-checkbox" /></td>
<td><input type="checkbox" name="input15" value="" class="form-checkbox" /></td>
<td><input type="checkbox" name="input18" value="" class="form-checkbox" checked="checked" /></td>
<td><a>All</a></td>
</tr>
<tr>
<th scope="row">Afternoon</th>
<td><input type="checkbox" name="input" value="" class="form-checkbox" /></td>
<td><input type="checkbox" name="input4" value="" class="form-checkbox" /></td>
<td><input type="checkbox" name="input7" value="" class="form-checkbox" checked="checked" /></td>
<td><input type="checkbox" name="input10" value="" class="form-checkbox" /></td>
<td><input type="checkbox" name="input13" value="" class="form-checkbox" /></td>
<td><input type="checkbox" name="input16" value="" class="form-checkbox" /></td>
<td><input type="checkbox" name="input19" value="" class="form-checkbox" checked="checked" /></td>
<td><a>All</a></td>
</tr>
<tr>
<th scope="row">Evening</th>
<td><input type="checkbox" name="input2" value="" class="form-checkbox" /></td>
<td><input type="checkbox" name="input5" value="" class="form-checkbox" /></td>
<td><input type="checkbox" name="input8" value="" class="form-checkbox" checked="checked" /></td>
<td><input type="checkbox" name="input11" value="" class="form-checkbox" checked="checked" /></td>
<td><input type="checkbox" name="input14" value="" class="form-checkbox" checked="checked" /></td>
<td><input type="checkbox" name="input17" value="" class="form-checkbox" /></td>
<td><input type="checkbox" name="input20" value="" class="form-checkbox" checked="checked" /></td>
<td><a>All</a></td>
</tr>
<tr>
<th scope="row"></th>
<td><a>All</a></td>
<td><a>All</a></td>
<td><a>All</a></td>
<td><a>All</a></td>
<td><a>All</a></td>
<td><a>All</a></td>
<td><a>All</a></td>
<td></td>
</tr>
</tbody>
</table>
Initial URL
Initial Description
The jQuery code also makes use of the [jQuery.checkBox](http://plugins.jquery.com/project/ui-checkbox) plugin.
Initial Title
Select "All" functionality with rows and cols of checkboxes
Initial Tags
Initial Language
jQuery