Getting data from the corresponding column.
In this code, I would like to edit the function to get not only the value of the item clicked, I would also like to get information from the thead section for the corresponding column. For example when I click on tBody-1B I would like it to get the value of tHead-1B or if I click on tBody-3C I would like to to also get the value of tHead-1C.
To make this example more readable, and to better convey my goal, I've colorized the table. Only the green area is click able (as it should be, the red area does not have a bound click event for a reason). When I click any part of the green area, it alerts the contents of that td but I also need it to get the value from the table head (blue area) also.
-
<!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>