Basta atribuir um evento a cada td
, vincular cada uma com seu th
através das classes
, e ao clicar subir no dom
até a table
para achar a respectiva th
isso de subir no dom
só é necessário caso tenha mais de uma table
$(document).ready(function(){
$('table tbody tr td').each(function(el) {
$(this).on('click', function(el) {
alert( $(this).closest('table').find( "th."+$(this).attr('class') ).text() );
})
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th class="item1">th</th>
<th class="item2">th1</th>
<th class="item3">th2</th>
<th class="item4">th3</th>
<th class="item5">th4</th>
</tr>
</thead>
<tbody>
<tr>
<td class="item1">td</td>
<td class="item2">td1</td>
<td class="item3">td2</td>
<td class="item4">td3</td>
<td class="item5">td4</td>
</tr>
</tbody>
<table>