2

2種類のクラスを持つHTMLで表示されたテーブルがあります

1 - 代替 2 - SelectedrowData

最初はクラス「alt」があり、クリックするとクラスが「SelectedrowData」に変更されます。同時に、クラスが「SelectedrowData」であった残りは「alt」に保持する必要があります。

簡単な言葉で。行をクリックすると、クラス名がトグルされます。他の行をクリックしても同じです。実際、テーブル全体で "SelectedrowData" は 1 つだけです。

私のテーブルは以下の通りです

    <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>
4

4 に答える 4

3 
$('tr').click(function(){
       $(this).attr('class', 'SelectedrowData')
       .siblings().attr('class', 'alt');
});
于 2012-08-27T13:35:32.707 に答える
0 
$('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');
});
于 2012-08-27T13:27:08.247 に答える
0

テーブル全体の場合は、次のようにします。

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

フィドル

于 2012-08-27T13:33:19.903 に答える
0

これを試すことができます

$('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 の両方のクリックが処理されます。

于 2012-08-27T13:33:57.893 に答える