получить информацию о таблице нажмите

Question

моя таблица имеет следующий HTML

<table class="tb" id="tb1"> 
<tr> 
<th scope="col">OrderID</th> 
<th scope="col">ProductName</th> 
<th scope="col">Quantity</th> 
</tr> 
<tr>....</tr> 

Когда я только нажать на любом КодЗаказа, ProductName или Quantity т.е. заголовок, я хочу, чтобы применить класс CSS для всего столбца.

Answer 1

$(document).ready(function(){ 
    $("table#tb1 th").click(function(){ 
     //from question#788225 
     var col = $(this).parent().children().index($(this)) + 1; 
     var t = $("table#tbl"); 
     $("td",t).removeClass("selCol"); 
     $("table#tbl tr td:nth-child("+ col +")").addClass("selCol"); 
    }); 
}); 

Answer 2

Привязать к click события на th элементов, найти индекс щелкнули th и добавить класс к соответствующему col элементу.

Работа демо: http://jsbin.com/iraco (редактируемые через http://jsbin.com/iraco/edit)

Соответствующая код:

<table id="eggs"> 
    <col /> <col /> <col /> 
    <tr> <th>foo</th> <th>bar</th> <th>baz</th> </tr> 
    <tr> <td>foo1</td> <td>bar1</td> <td>baz1</td> </tr> 
    <tr> <td>foo2</td> <td>bar2</td> <td>baz2</td> </tr> 
    <tr> <td>foo3</td> <td>bar3</td> <td>baz3</td> </tr> 
</table> 
<script> 
    $('#eggs th').click(function(){ 
    var index = $(this).prevAll().length; 
    $('#eggs col') 
     .removeClass('clicked') 
     .eq(index).addClass('clicked'); 
    }); 
</script>