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

问题描述：

到目前为止，我已经计算出大部分代码，当点击该行时，我需要选择<tr>内的单选按钮&以在点击时更改<tr>的颜色，但我需要能够改变颜色回&如果用户选择一个不同的更改新的<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'); 
     } 
    ); 
...

答

所有tr元素删除selectedtr类第一，然后将其添加到当前的一个：

$('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/

因此，出于某种原因，使用此解决方案和“大卫托马斯”的解决方案它的工作了一段时间，但突然，单选按钮选择停止工作，虽然行仍然改变颜色。它工作大约6次，然后突然单选按钮停止选择＆只有行颜色改变。 – user2579958

我刚刚意识到，无论我是否使用代码来突出显示该行，都会发生此问题。出于某种原因，单击行时选择单选按钮的代码只能工作4到5次。任何想法为什么？ – user2579958

好吧，我刚刚发现了这个问题。一旦单选按钮被这种方法“检查”，如果你检查一个不同的单选按钮并试图检查它，不再切换。我猜我必须以同样的方式清除所有单选按钮上的“checked”属性。这样做的最好方法是什么？ – user2579958

答

我会用CSS：

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

只有在鼠标超过它时才会改变它，而不是我想要做的。我需要能够**选择**它。 – user2579958

然后您可以添加伪状态：选中或：单击等。顺便说一句，你可以谷歌它：http://www.javascriptkit.com/dhtmltutors/structuralcss.shtml – GFP

答

我建议：

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

答

我认为只需要记住当前之前删除类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颜色

相关推荐