Question

我有一个以HTML格式显示的表，它有两种类

1 - alt 2 - SelectedrowData

最初将点击类“alt”，单击该类将更改为“SelectedrowData”。同时保留其类为“SelectedrowData”的类应保留为“alt”。

简单来说。 当我点击一行时，应该切换班级名称。当我点击其他行时也是如此。事实上，在整个表格中，只有1个“SelectedrowData”

我的表格如下

    <table>
    <thead></thead>
    <tbody>
    <tr class="alt">
        <td>72</td>
        <td>SALES DEPT. SALES STAFF</td>
        <td class="fieldHide">7018072</td>
        <td class="fieldHide">7018572</td>
        <td class="fieldHide">7018072</td>
        <td class="fieldHide">7018072</td>
        <td class="fieldHide">6</td>
        <td class="fieldHide"></td>
        <td>Default</td>
    </tr>
    <tr class="SelectedrowData">
        <td>73</td>
        <td>SALES DEPT. OFFICE ADMIN</td>
        <td class="fieldHide">7018073</td>
        <td class="fieldHide">7018573</td>
        <td class="fieldHide">7018073</td>
        <td class="fieldHide">7018073</td>
        <td class="fieldHide">7</td>
        <td class="fieldHide"></td>
        <td>Default</td>
    </tr>
    <tr class="alt">
        <td>72</td>
        <td>SALES</td>
        <td class="fieldHide">7018072</td>
        <td class="fieldHide">7018572</td>
        <td class="fieldHide">7018072</td>
        <td class="fieldHide">7018072</td>
        <td class="fieldHide">6</td>
        <td class="fieldHide"></td>
        <td>Default</td>
    </tr>
    </tbody>
</table>

Answer 1

$('tr').click(function(){
       $(this).attr('class', 'SelectedrowData')
       .siblings().attr('class', 'alt');
});

Answer 2

$('tbody tr').click(function(){
   // First, make all the tr's have the 'alt' class
   $('tbody tr').attr('class','alt');

   // Now make this tr the one with the unique class
   $(this).attr('class', 'SelectedrowData');
});

Answer 3

如果是整张桌子，请执行：

$('tr').on('click', function() {
    $(".SelectedrowData").add(this).toggleClass('alt SelectedrowData');
});

FIDDLE

Answer 4

你可以试试这个

$('table').click(function(e){
    var $clickedRow;
    if(e.target.nodeName === 'TR') {
        $clickedRow = $(e.target);
    } else {
        if($(e.target).parents('tr').length > 0) {
            $clickedRow = $(e.target).parents('tr');
        } else {
            $clickedRow = undefined;
        }
    }

    if($clickedRow) {
        $('.SelectedrowData').removeClass('SelectedrowData');
        $clickedRow.removeClass('alt').addClass('SelectedrowData');
    } 
});

这将处理tr和td上的点击。

选择具有其他类名的附近表行并切换该类

4 个答案: