javascript - 选择新的 tr 后更改选定的 tr 颜色

Question

到目前为止，我已经弄清楚了我需要在<tr>单击行时选择 a 内的单选按钮并更改单击<tr>时的颜色的大部分代码，但我需要能够将颜色更改回来并更改<tr>如果用户选择不同的颜色，则为新颜色。现在它只是不断改变行的颜色，但不会改变它们。代码如下：

<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');
        }
    );
...

Answer 1

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

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

编辑- 我不认为大卫托马斯的答案是你正在寻找的，但我确实认为siblings()选择会比选择所有tr元素更有效。

另一个编辑

参考您的评论：prop应该使用而不是attr. 这是一个小提琴：

http://jsfiddle.net/xQyAV/

Answer 2

I'd suggest:

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

Answer 3

我认为它只需要在记住当前id实体之前删除类：

$(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');
    });
});

Answer 4

我会使用css：

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