Within the hierarchy below, how can I manipulate a given class to <th> after clicking on an element within <td> ? Remembering that there are several tables like this one.
<table>
<thead>
<tr>
<th class=""></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tdody>
<table>
Thank you!
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>