javascriptを使用して列セル内のスパンをクリックしてセルのヘッダーテキストを取得する方法は？

Question

私は画像の下のようなように、そのヘッダーの列の任意のセルをクリックすることで、列のセルのヘッダ名を取得するためにWANおよびここに私はこれが私のHTML

<table> 
    <thead> 
     <tr>   
      <th>head1</th> 
      <th>head1</th> 
      <th>head1</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr>   
      <td><span class="abc"></span></td> 
      <td></td> 
      <td></td> 
     </tr> 
     <tr> 
      <td><span class="abc"></span></td> 
      <td></td> 
      <td></td> 
     </tr> 
     <tr>  
      <td><span class="abc"></span></td> 
      <td></td> 
      <td></td> 
     </tr> 
    </tbody> 
</table> 

あるスパン

にクラスを持っています

どれでもこれに役立つことがありますか？

Answer 1

これを行う1つの方法は、各テーブルセルにクリックハンドラを割り当て、クリックが発生した列番号を追跡することです。次に列番号を使用して、その列の<th>要素のテキストを読み取ることができます。

var table = document.querySelector('table'), 
    rows = table.rows 

for(var r=0; r<rows.length; r++) { 
    var cells = rows[r].querySelectorAll('td') 
    for(var c=0; c<cells.length; c++) { 
    (function(col) { 
     cells[col].addEventListener('click', function() { 
     alert(rows[0].querySelectorAll('th')[col].textContent) 
     }) 
    })(c) 
    } 
} 

Here is a working demo