To make this example more readable, and to better convey my goal, I've
restructured the CSS and HTML. Only the green area is click able (as
it should be, the red area does not have a bound click even for a
reason). When I click any part of the green area, I would like to get
the value from the table head from the blue area in the corresponding
column.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en">
<head>
<title>Example Table</title>
<style>
table, thead, tbody, tfoot, tr, th, td {
border-collapse: collapse; border: 1px
SOLID;
padding: 10px 10px 10px 10px;
font: 12px Arial;
}
thead th {background: #FAA;} thead td {background:
#AAF;}
tbody th {background: #FCC;} tbody td {background:
#CFC;}
tbody tr.odd th {background: #FAA;} tbody tr.odd td
{background: #AFA;}
</style>
<script
src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js";
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("tbody td").click(function(e) {
var innerHTML =
$(this).get(0).innerHTML;
alert(innerHTML);
});
$("tbody tr:odd").addClass('odd');
});
</script>
</head>
<body>
<table>
<thead>
<tr><th>tHead-1A</th><td>tHead-1B</td><td>tHead-1C</td><td>tHead-1D</td></tr>
</thead>
<tbody>
<tr><th>tBody-1A</th><td>tBody-1B</td><td>tBody-1C</td><td>tBody-1D</td></tr>
<tr><th>tBody-2A</th><td>tBody-2B</td><td>tBody-2C</td><td>tBody-2D</td></tr>
<tr><th>tBody-3A</th><td>tBody-3B</td><td>tBody-3C</td><td>tBody-3D</td></tr>
<tr><th>tBody-4A</th><td>tBody-4B</td><td>tBody-4C</td><td>tBody-4D</td></tr>
</tbody>
</table>
</body>
</html>
Title: Example Table
| tHead-1A | tHead-1B | tHead-1C | tHead-1D |
|---|
| tBody-1A | tBody-1B | tBody-1C | tBody-1D |
|---|
| tBody-2A | tBody-2B | tBody-2C | tBody-2D |
|---|
| tBody-3A | tBody-3B | tBody-3C | tBody-3D |
|---|
| tBody-4A | tBody-4B | tBody-4C | tBody-4D |
|---|
