Вызов функции нажмите для TH с классом

Question

У меня есть таблица

<table id="dataTable"> 
<thead> 
    <tr> 
     <th>TH 1</th> 
     <th>TH 2</th> 
     <th class="sortable">TH 3</th> 
     <th>TH 4</th> 
     <th>TH 5</th> 
     <th class="sortable">TH 6</th> 
     <th>TH 7</th> 
     <th>TH 8</th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
     <td>Data 1</td> 
     <td>Data 2</td> 
     <td>Data 3</td> 
     <td>Data 4</td> 
     <td>Data 5</td> 
     <td>Data 6</td> 
     <td>Data 7</td> 
     <td>Data 8</td> 
    </tr> 
</tbody> 
</table> 

Мне нужно решение для добавления класса в TD только под TH с классом «сортировка», но только если я нажимаю только TH с классом сортировки.

Теперь я использую Jquery код

$("#dataTable th").click(function() { 
    if ($("th").hasClass("sortable") { 
     // has specialclass 
     var colIndex = $(this).parent().children().index($(this)); 

     $('tr').find('td.td-sorting').removeClass('td-sorting'); 
     $('tr').find('td:eq(' + colIndex + ')').addClass('td-sorting'); 
    } 
}); 

Эта часть кода работает отлично:

var colIndex = $(this).parent().children().index($(this)); 

     $('tr').find('td.td-sorting').removeClass('td-sorting'); 
     $('tr').find('td:eq(' + colIndex + ')').addClass('td-sorting'); 
    } 

Но не работает вызываем функцию только для TH с классом "сортировкой"

Answer 1

Ваш if ($("th").hasClass("sortable") { выполняет новый «синтаксический разбор», в результате чего все страницы со страницы. У одного из них есть класс, поэтому условие будет истинным.

Просто добавьте свой класс к первоначальному селекторе CSS:

$("#dataTable th.sortable").click(function() { 

Answer 2

Вы могли бы сделать что-то вроде этого

$('th.sortable').click(function(){ 
    $(this) 
    .closest('thead') // find thead 
    .next() // tbody 
    .find('tr td') // td 
    .eq($(this).index()) // access by index 
    .addClass("td-sorting"); // add class 
}) 

Answer 3

Вы можете использовать так:

$('th.sortable').click(function(){ 
    $(this).parents('table').find('td').removeClass('td-sorting'); 
    $(this).parents('table').find('td').eq($(this).index()).addClass("td-sorting"); 
});