Just assign an event to each td
, link each one with its th
through the classes
, and by clicking up dom
to table
to find its th
that climbing on dom
is only required if you have more than 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><thclass="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>