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.
<!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>WLVAC Cadets Member List</title>
<style>
table, thead, tbody, tfoot, tr, th, td {
border-collapse: collapse;
border: 1px SOLID;
padding: 10px 10px 10px 10px;
}
</style>
<script src="http://jqueryjs.googlecode.com/files/
jquery-1.3.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('tbody td').click(function(e) {
var innerHTML =
$(this).get(0).innerHTML;
alert(innerHTML);
})
});
</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>
