Question

当我选中一个复选框时，我需要根据使用jquery的数据库中的用户和ID对HTML表行应用不同的背景颜色，然后取消选中该复选框转到之前的状态。为了记录我不是要求代码我要求的概念。

http://www.freeimagehosting.net/image.php?ef44cf44a5.jpg

Answer 1

我认为问题是如何存储每一行的单独背景颜色。

您可以将每种颜色存储在单个属性中：

<tr bg_checkbox_active="#FFFFFF">

但是在HTML 4.x中没有W3C有效的方法（请参阅讨论，例如here）。

想到的最好的想法是在CSS类中声明每一行的颜色：

....
.row10.active { background-color: #FFFFFF }
.row11.active { background-color: #FAFAFA }
.row12.active { background-color: #BCBCBC }
....

然后让jQuery根据复选框状态切换行的类。它保持代码清洁;当与 lot 行一起使用时，CSS语法会产生一些开销，但这可能是微不足道的。

更新一个复选框以更改所有行：，这更容易使用CSS。

....
table.active .row10 { background-color: #FFFFFF }
table.active .row11 { background-color: #FAFAFA }
table.active .row12 { background-color: #BCBCBC }
....

然后切换表的active类。

Answer 2

您希望使用与表行匹配的选择器，从行中获取用户的ID并选择颜色，然后使用css函数设置background-color。您可以使用data方法存储以前的颜色。取消选中复选框后，只需使用数据获取以前的颜色，然后将其恢复。

如果用户的id不包含在行中或以某种方式与行相关，那么您需要更改表并添加它，否则就不可能。

这里有一些代码可以帮助您入门 - 这是“检查”部分。

$('tr').each( function() {
    var id == $(this)...  // get user id
    var color = chooseColor( id ); // figure out color somehow
    $(this).data( 'previous-color', $(this).css('background-color') );
    $(this).css( 'background-color', color );
});

编辑：根据您的评论，我认为CSS类可能是更好的解决方案 - 只需将组名称指定为类。然后在你的CSS中有.groupX和.groupX.active，.groupY和.groupY.active等不同的CSS选择器。然后你需要做的就是添加/删除活动类复选框切换上的行。我不知道“活动”类名是否在语义上最合适，但它对于示例来说很方便。

CSS

tr.group-ANIM { /* no special formatting */ }
tr.group-ANIM.active { background-color: #f00; }

tr.group-ZZZ { }
tr.group-ZZZ.active { background-color: #0f0; }

$('#toggleBox').click{ function() {
     var checked = $(this).filter(':checked').length > 0;
     if (checked) {
         $('tr').addClass('active');
     }
     else {
         $('tr').removeClass('active');
     }
 });

Answer 3

理论上你可以使用jQuery调用来完成所有这些。您将使用绑定到TR的.change（）事件来处理行的单击。

http://api.jquery.com/change/

在你的.change（）处理函数中，你可以使用jQuery .css（）方法来更新每一行的样式。

http://api.jquery.com/css/

甚至更好地使用.addClass（）和.removeClass（）方法来更新行的类。

http://api.jquery.com/addClass/

http://api.jquery.com/removeClass/

无论如何，在初始化页面时，您需要将独特的样式或类应用于每个单独行的背景。

http://www.w3schools.com/css/css_background.asp

单击时更改HTML表格行的背景颜色

3 个答案: