选择新的 tr 后更改选定的 tr 颜色答案

【问题标题】：Change selected tr color back after selecting new tr选择新的 tr 后更改选定的 tr 颜色
【发布时间】：2017-01-02 07:18:54
【问题描述】：

到目前为止，我已经找到了大部分代码，我需要在单击该行时选择 <tr> 内的单选按钮并在单击该行时更改 <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');
        }
    );
...

【问题讨论】：

标签： javascript jquery css html-table

【解决方案1】：

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

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

编辑 - 我不认为 David Thomas 的答案正是您想要的，但我确实认为 siblings() 选择会比选择所有 tr 元素更有效。

另一个编辑

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

http://jsfiddle.net/xQyAV/

【讨论】：

因此，由于某种原因，使用此解决方案和“David Thomas”的解决方案它工作了一段时间，但突然间，单选按钮选择停止工作，尽管行仍然改变颜色。它工作了大约 6 次，然后突然单选按钮停止选择，只有行颜色发生变化。
我刚刚意识到，无论我是否使用代码突出显示该行，都会发生此问题。出于某种原因，在单击该行时选择单选按钮的代码只能工作大约 4 或 5 次。任何想法为什么？
好的，我刚刚发现了这个问题。一旦通过此方法“检查”了一个单选按钮，如果您检查另一个并尝试检查相同的单选按钮，则不再切换。我猜我必须以与删除类相同的方式清除所有单选按钮上的“已检查”属性。最好的方法是什么？
我还没有验证这一点，但请尝试使用prop 而不是attr
@user2579958 - 编辑了我的答案以回复您的评论。

【解决方案2】：

我会使用 css：

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

【讨论】：

只有当鼠标在它上面时才会改变它，而不是我想要做的。我需要能够选择它。
然后你可以添加伪状态 :selected 或 :clicked 等等。顺便说一句，你可以谷歌它：javascriptkit.com/dhtmltutors/structuralcss.shtml

【解决方案3】：

我建议：

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

【讨论】：

【解决方案4】：

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

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

【讨论】：