Here's one way:
$(document).ready(function() {
$("tbody td").click(function(e) {
var index = $(this).parent().children().index(this);
alert( $(this).parents('tbody').prev().find('tr').children(':eq
('+index+')').text() );
});
$("tbody tr:odd").addClass('odd');
});
You just need the index of the td that was clicked on and then find
the td in the head with the same index.
There's lots of ways to traverse the structure and achieve the same
result, however it would be easier and faster if you gave your
elements 'hooks' such as IDs or classes to get them directly. For
example if you gave the thead tr an id of 'foo', you could gor from
this:
$(this).parents('tbody').prev().find('tr').children(':eq('+index
+')').text();
to this:
$('#foo').children(':eq('+index+')').text();
That can also help insulate your code from changes in structure.
On Feb 12, 9:36 am, Mark Tomlin <dyg...@gmail.com> wrote:
> 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></t r>
> </thead>
> <tbody>
>
> <tr><th>tBody-1A</th><td>tBody-1B</td><td>tBody-1C</td><td>tBody-1D</td></t r>
>
> <tr><th>tBody-2A</th><td>tBody-2B</td><td>tBody-2C</td><td>tBody-2D</td></t r>
>
> <tr><th>tBody-3A</th><td>tBody-3B</td><td>tBody-3C</td><td>tBody-3D</td></t r>
>
> <tr><th>tBody-4A</th><td>tBody-4B</td><td>tBody-4C</td><td>tBody-4D</td></t r>
> </tbody>
> </table>
> </body>
> </html>
>
> example.htm
> 1KViewDownload
