Question

到目前为止，我已经找到了在点击行时<tr>内部选择单选按钮所需的大部分代码。单击<tr>时更改<tr>的颜色，但我需要能够将颜色更改为＆amp;如果用户选择另一个，则更改新<script> var prevTr; $('tr').click( function() { $('input[type=radio]',this).attr('checked','checked'); $(this).addClass('selectedtr');//css('background-color', 'Green'); prevTr = $(this).id; $("#"+prevTr).removeClass('selectedtr'); } ); ...的颜色。现在它只是不断改变行的颜色，但不会改变它们。代码如下：

{{1}}

Answer 1

首先从所有selectedtr元素中删除tr类，然后将其添加到当前元素中：

$('tr').click(
        function() {
            $('input[type=radio]',this).prop('checked','checked');
            $(this).siblings().removeClass('selectedtr');
            $(this).addClass('selectedtr');
        }
    );

编辑 - 我认为大卫托马斯的回答并不是你想要的，但我确实认为siblings()选择比选择所有{{1}更有效率元素。

另一个编辑

参考您的评论：应使用tr代替prop。这是一个小提琴：

http://jsfiddle.net/xQyAV/

Answer 2

我会用css：

binput[type=radio]:hover {
     //here edits
     //the setting back happens automaticly
}

Answer 3

我建议：

$('input[type=radio]').change(function (){
    var self = this,
        row = $(self).closest('tr');
    row.addClass('trSelected').siblings().removeClass('reselected');
});

Answer 4

我认为只需要在记住当前id entifier之前删除该类：

$(function () {
    var prevTr = false;
    $('tr').click(function () {
        if (prevTr) {
            $("#" + prevTr).removeClass('selectedtr');
        }
        prevTr = $(this).id;
        $('input[type=radio]', this).attr('checked', 'checked');
        $(this).addClass('selectedtr');
    });
});

选择新tr后，将选定的tr颜色更改回来

4 个答案: