Handling classes with jQuery / Javascript

0

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!

    
asked by anonymous 27.07.2017 / 20:41

1 answer

1

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>
    
27.07.2017 / 21:03