<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<!-- Generated from http://www.csgnetwork.com/simplehtmltablegen.html -->
<table>
<thead>
<tr>
<th>[Header for Column 1]</th>
<th>[Header for Column 2]</th>
<th>[Header for Column 3]</th>
<th>[Header for Column 4]</th>
<th>[Header for Column 5]</th>
</tr>
</thead>
<tr>
<td>[Row 1, Column 1]</td>
<td>[Row 1, Column 2]</td>
<td>[Row 1, Column 3]</td>
<td>[Row 1, Column 4]</td>
<td>[Row 1, Column 5]</td>
</tr>
<tr>
<td>[Row 2, Column 1]</td>
<td>[Row 2, Column 2]</td>
<td>[Row 2, Column 3]</td>
<td>[Row 2, Column 4]</td>
<td>[Row 2, Column 5]</td>
</tr>
<tr>
<td>[Row 3, Column 1]</td>
<td>[Row 3, Column 2]</td>
<td>[Row 3, Column 3]</td>
<td>[Row 3, Column 4]</td>
<td>[Row 3, Column 5]</td>
</tr>
<tr>
<td>[Row 4, Column 1]</td>
<td>[Row 4, Column 2]</td>
<td>[Row 4, Column 3]</td>
<td>[Row 4, Column 4]</td>
<td>[Row 4, Column 5]</td>
</tr>
<tr>
<td>[Row 5, Column 1]</td>
<td>[Row 5, Column 2]</td>
<td>[Row 5, Column 3]</td>
<td>[Row 5, Column 4]</td>
<td>[Row 5, Column 5]</td>
</tr>
<tr>
<td>[Row 6, Column 1]</td>
<td>[Row 6, Column 2]</td>
<td>[Row 6, Column 3]</td>
<td>[Row 6, Column 4]</td>
<td>[Row 6, Column 5]</td>
</tr>
<tr>
<td>[Row 7, Column 1]</td>
<td>[Row 7, Column 2]</td>
<td>[Row 7, Column 3]</td>
<td>[Row 7, Column 4]</td>
<td>[Row 7, Column 5]</td>
</tr>
<tr>
<td>[Row 8, Column 1]</td>
<td>[Row 8, Column 2]</td>
<td>[Row 8, Column 3]</td>
<td>[Row 8, Column 4]</td>
<td>[Row 8, Column 5]</td>
</tr>
<tr>
<td>[Row 9, Column 1]</td>
<td>[Row 9, Column 2]</td>
<td>[Row 9, Column 3]</td>
<td>[Row 9, Column 4]</td>
<td>[Row 9, Column 5]</td>
</tr>
<tr>
<td>[Row 10, Column 1]</td>
<td>[Row 10, Column 2]</td>
<td>[Row 10, Column 3]</td>
<td>[Row 10, Column 4]</td>
<td>[Row 10, Column 5]</td>
</tr>
</table>
</body>
</html>
// Code goes here
$(init);
function init() {
$('td').on('click', getHeader );
}
var getHeader = function(){
$td = $(this);
$th = $td.closest('table').find('th').eq($td.index());
var thText = $th.text();
console.log('Column ' , $td);
console.log('Row ' , $td.parent());
console.log('Th ' , $th);
}
/* Styles go here */
How to know the td, tr, and th of a selected column of a html table