<!DOCTYPE HTML>
<html>
<head>
<title></title>
<style type="text/css">
.stripy tr:nth-child(2n+1){
background-color:#ffe;
}
.stripy tr:nth-child(2n){
background-color:#efe;
}
.stripy tr:hover {
background-color:#999;
}
.grid tr.selected td{
background-color: #ccc;
}
.grid thead th{
text-align: center;
}
</style>
</head>
<body>
<form name="frmMain" action="" method="post" OnSubmit="return onDelete();">
<table width="600" border="1" class="grid">
<thead>
<tr>
<th width="91">
<div>CustomerID</div>
</th>
<th width="98">
<div>Name</div>
</th>
<th width="198">
<div>Email</div>
</th>
<th width="97">
<div>CountryCode</div>
</th>
<th width="59">
<div>Budget</div>
</th>
<th width="71">
<div>Used</div>
</th>
<th width="30">
<div>
<input name="CheckAll" type="checkbox" id="CheckAll" value="Y" onclick="clickCheckAll()">
</div>
</th>
</tr>
</thead>
<tbody>
<tr id="tr1">
<div align="center">C001</div>
</td>
<td>Win Weerachai</td>
<td>win.weerachai@thaicreate.com</td>
<td>
<div align="center">TH</div>
</td>
<td align="right">1000000</td>
<td align="right">600000</td>
<td align="center">
<input type="checkbox" name="chkDel[]" id="chkDel1" value="C001">
</td>
</tr>
<tr id="tr2">
<td>
<div align="center">C002</div>
</td>
<td>John Smith</td>
<td>john.smith@thaicreate.com</td>
<td>
<div align="center">EN</div>
</td>
<td align="right">2000000</td>
<td align="right">800000</td>
<td align="center">
<input type="checkbox" name="chkDel[]" id="chkDel2" value="C002">
</td>
</tr>
<tr id="tr3">
<td>
<div align="center">C003</div>
</td>
<td>Jame Born</td>
<td>jame.born@thaicreate.com</td>
<td>
<div align="center">US</div>
</td>
<td align="right">3000000</td>
<td align="right">600000</td>
<td align="center">
<input type="checkbox" name="chkDel[]" id="chkDel3" value="C003">
</td>
</tr>
<tr id="tr4">
<td>
<div align="center">C004</div>
</td>
<td>Chalee Angel</td>
<td>chalee.angel@thaicreate.com</td>
<td>
<div align="center">US</div>
</td>
<td align="right">4000000</td>
<td align="right">100000</td>
<td align="center">
<input type="checkbox" name="chkDel[]" id="chkDel4" value="C004">
</td>
</tr>
</tbody>
</table>
<input type="hidden" name="hdnCount" value="5">
</form>
<script>
(function(){
var form = document.getElementsByName('frmMain')[0];
var table = form.getElementsByTagName('table')[0];
var checker = table.children[0].getElementsByTagName('input')[0];
var rows = table.children[1].getElementsByTagName('tr');
var toggleRow = function(row, checked) {
var checkbox = row.getElementsByTagName('input')[0];
if (checked === undefined) {
checked = !checkbox.checked;
}
if (checked) {
row.className = row.className + (checkbox.checked ? '' : ' selected');
} else {
row.className = row.className.replace(' selected', '');
}
checkbox.checked = checked;
}
for (var i = 0; i < rows.length; i++) {
var checkbox = rows[i].getElementsByTagName('input')[0];
checkbox.onclick = function() { this.checked = !this.checked }
rows[i].onclick = function(){ toggleRow(this) };
}
checker.onclick = function() {
for (var i = 0; i < rows.length; i++) {
toggleRow(rows[i], this.checked);
}
}
})();
</script>
</body>
</html>
Да, с jQuery в сто раз проще было бы...