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>

我需要解决方案，只在TH下使用类＆＃34;可排序＆＃34;但仅限于如果我只点击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');
    }

但是，对于具有类＆＃34; sortable＆＃34;

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

仅对TH类呼叫点击功能

3 个答案: