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

Question

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

1 - 替代 2 - 选定行数据

最初，单击时将具有类“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');
});​

小提琴

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 上的点击。