table rows clickable jQuery
/Html JavaSript/table rows clickable jQuery.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>table rows clickable</title>
<style type="text/css">
#bigGrille tr:hover {background:#FF0}
#bigGrille tr.clicked {background:#FC3}
</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.4.1")</script>
<script type="text/javascript">
$(document).ready(function(){
$("#bigGrille tr").each(
function(){
$(this).bind("click", function(){$(this).toggleClass("clicked")})
}
);
<!-- stop event propagation : -->
$("#bigGrille input[type=checkbox]").each(
function(){
$(this).bind("click", function(e){e.stopPropagation()})
$("label[for='"+this.id+"']").bind("click", function(e){e.stopPropagation()})
}
);
});
</script>
</head>
<body>
<div>Version jquery...</div>
<table id="bigGrille" border="1" style="width:20em">
<tr><td>row 1 onclick...</td></tr>
<tr><td>row 2 onclick...</td></tr>
<tr><td>row 3 onclick...</td></tr>
<tr><td>row 4 onclick...
<form action="">
<div style="text-align:center">
<input type="checkbox" name="xx" id="xx" value="">
<label for="xx">checkbox click event stoppé</label>
</div>
</form>
</td></tr>
<tr><td>row 5 onclick...</td></tr>
<tr><td>row 6 onclick...</td></tr>
</table>
</body>