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

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>

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

Answer 1

Привязать к событию 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>

Answer 2

$(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");
    });
});