Hmm, the group went offline seconds after I posted; I swear it wasn't
my fault :P, so sorry if this appears twice;
Try this:
$(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');
});
Basically you want the index of the td you clicked and then find the
corresponding td in the thead with that index.
There are lots of ways you could traverse the table and get the same
result. If you provide specific 'hooks' on your elements in the form
of id's or classes, you can cut down on complexity and time to
traverse the DOM. For example, give the tr in the thead an id of 'foo'
and use this:
$('#foo').children(':eq('+index+')').text();
It will also help insulate your code from structure changes (e.g. if
you decided to add a tfoot after the thead, prev() in the first
example would fail).
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
