<html >
<head runat="server">
<title>check all checkboxes and delete row in a table</title>
<script src="jquery-1.7.min.js" type="text/javascript">
<script src="tables.js" type="text/javascript">
jQuery(document).ready(function(){
jQuery('.stdtablecb .checkall').click(function(){
var parentTable = jQuery(this).parents('table');
var ch = parentTable.find('tbody input[type=checkbox]');
if(jQuery(this).is(':checked')) {
//check all rows in table
ch.each(function(){
jQuery(this).attr('checked',true);
jQuery(this).parent().addClass('checked'); //used for the custom checkbox style
jQuery(this).parents('tr').addClass('selected');
});
//check both table header and footer
parentTable.find('.checkall').each(function(){ jQuery(this).attr('checked',true); });
} else {
//uncheck all rows in table
ch.each(function(){
jQuery(this).attr('checked',false);
jQuery(this).parent().removeClass('checked'); //used for the custom checkbox style
jQuery(this).parents('tr').removeClass('selected');
});
//uncheck both table header and footer
parentTable.find('.checkall').each(function(){ jQuery(this).attr('checked',false); });
}
});
// delete row in a table
if(jQuery('.deleterow').length > 0) {
jQuery('.deleterow').click(function(){
var conf = confirm('Continue delete?');
if(conf)
jQuery(this).parents('tr').fadeOut(function(){
jQuery(this).remove();
// do some other stuff here
});
return false;
});
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table class="stdtable stdtablecb" cellspacing="0" cellpadding="0" border="0">
<colgroup>
<col class="con0" style="width: 4%">
<col class="con1">
<col class="con0">
<col class="con1">
<col class="con0">
<col class="con1">
<col class="con0">
</colgroup>
<thead>
<tr>
<th class="head0">
<input class="checkall" type="checkbox">
</th>
<th class="head1">Rendering engine</th>
<th class="head0">Browser</th>
<th class="head1">Platform(s)</th>
<th class="head0">Engine version</th>
<th class="head1">CSS grade</th>
<td class="head0">Delete</td>
</tr>
</thead>
<tfoot>
<tr>
<th class="head0">
<input class="checkall" type="checkbox">
</th>
<th class="head1">Rendering engine</th>
<th class="head0">Browser</th>
<th class="head1">Platform(s)</th>
<th class="head0">Engine version</th>
<th class="head1">CSS grade</th>
<td class="head0">Delete</td>
</tr>
</tfoot>
<tbody>
<tr>
<td align="center">
<input type="checkbox">
</td>
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td>Win 95+</td>
<td class="center">4</td>
<td class="center">X</td>
<td class="centeralign">
<a class="deleterow" href="#">X</a>
</td>
</tr>
<tr>
<td align="center">
<input type="checkbox">
</td>
<td>Trident</td>
<td>Internet Explorer 5.0</td>
<td>Win 95+</td>
<td class="center">5</td>
<td class="center">C</td>
<td class="centeralign">
<a class="deleterow" href="#">X</a>
</td>
</tr>
</tbody>
</table>
</div>
</form>
</body>
</html>
<head runat="server">
<title>check all checkboxes and delete row in a table</title>
<script src="jquery-1.7.min.js" type="text/javascript">
<script src="tables.js" type="text/javascript">
jQuery(document).ready(function(){
jQuery('.stdtablecb .checkall').click(function(){
var parentTable = jQuery(this).parents('table');
var ch = parentTable.find('tbody input[type=checkbox]');
if(jQuery(this).is(':checked')) {
//check all rows in table
ch.each(function(){
jQuery(this).attr('checked',true);
jQuery(this).parent().addClass('checked'); //used for the custom checkbox style
jQuery(this).parents('tr').addClass('selected');
});
//check both table header and footer
parentTable.find('.checkall').each(function(){ jQuery(this).attr('checked',true); });
} else {
//uncheck all rows in table
ch.each(function(){
jQuery(this).attr('checked',false);
jQuery(this).parent().removeClass('checked'); //used for the custom checkbox style
jQuery(this).parents('tr').removeClass('selected');
});
//uncheck both table header and footer
parentTable.find('.checkall').each(function(){ jQuery(this).attr('checked',false); });
}
});
// delete row in a table
if(jQuery('.deleterow').length > 0) {
jQuery('.deleterow').click(function(){
var conf = confirm('Continue delete?');
if(conf)
jQuery(this).parents('tr').fadeOut(function(){
jQuery(this).remove();
// do some other stuff here
});
return false;
});
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table class="stdtable stdtablecb" cellspacing="0" cellpadding="0" border="0">
<colgroup>
<col class="con0" style="width: 4%">
<col class="con1">
<col class="con0">
<col class="con1">
<col class="con0">
<col class="con1">
<col class="con0">
</colgroup>
<thead>
<tr>
<th class="head0">
<input class="checkall" type="checkbox">
</th>
<th class="head1">Rendering engine</th>
<th class="head0">Browser</th>
<th class="head1">Platform(s)</th>
<th class="head0">Engine version</th>
<th class="head1">CSS grade</th>
<td class="head0">Delete</td>
</tr>
</thead>
<tfoot>
<tr>
<th class="head0">
<input class="checkall" type="checkbox">
</th>
<th class="head1">Rendering engine</th>
<th class="head0">Browser</th>
<th class="head1">Platform(s)</th>
<th class="head0">Engine version</th>
<th class="head1">CSS grade</th>
<td class="head0">Delete</td>
</tr>
</tfoot>
<tbody>
<tr>
<td align="center">
<input type="checkbox">
</td>
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td>Win 95+</td>
<td class="center">4</td>
<td class="center">X</td>
<td class="centeralign">
<a class="deleterow" href="#">X</a>
</td>
</tr>
<tr>
<td align="center">
<input type="checkbox">
</td>
<td>Trident</td>
<td>Internet Explorer 5.0</td>
<td>Win 95+</td>
<td class="center">5</td>
<td class="center">C</td>
<td class="centeralign">
<a class="deleterow" href="#">X</a>
</td>
</tr>
</tbody>
</table>
</div>
</form>
</body>
</html>
No comments:
Post a Comment