更改表格单元格的背景颜色并选中复选框答案

【问题标题】：Change background colour on table cell and check checkbox更改表格单元格的背景颜色并选中复选框
【发布时间】：2011-09-26 05:21:51
【问题描述】：

我有一张“漂亮”类的桌子。

每一行旁边都有一个复选框，用于使用表单选择数据。

我希望能够单击单元格并勾选/取消勾选复选框。

我有这个工作使用

$(document).ready(function () {
  $('.pretty tr').toggle(function() {
      $(this).find(':checkbox').attr('checked', true);  
  }, function() {
      $(this).find(':checkbox').attr('checked', false);
});

});

除此之外，我希望在选中复选框时更改单元格背景颜色，如果取消选中则不更改。

我没有任何运气这样做，有什么想法吗？

我已经尝试添加

$(this).addClass('cssclassname');

上面没有运气:(

仅编辑一个更新，“漂亮”类已经具有以下 css，这使得表格中的数据每行的颜色不同。

似乎当我尝试 jquery toggleClass 函数时，它并没有将它应用到已经存在的 CSS 上？

    table.pretty {
  background: whitesmoke;
  border-collapse: collapse;
}
table.pretty th, table.pretty td {
  border: 1px silver solid;
  padding: 0.2em;
}
table.pretty th {
  background: gainsboro;
  text-align: left;
}
table.pretty caption {
  margin-left: inherit;
  margin-right: inherit;
}
table.pretty tr:nth-child(odd)    { background-color:#eee; }
table.pretty tr:nth-child(even)    { background-color:#fff; }

【问题讨论】：

标签： jquery

【解决方案1】：

看到这个DEMO

您的 Jquery 的替代品是 HERE

让我们查看演示 HERE 。我不确定这是不是最好的方法

【讨论】：

好吧尝试了这个，漂亮的类已经有css属性有关系吗？如果将它们添加到您的演示中，它将不再有效。
@user，我认为添加其他类不会影响切换类。请更新您的问题以提供更多详细信息
用更多细节更新了问题。这是您使用的网站的更新版本jsfiddle.net/unauu/9
谢谢，这很好用。比我期待的更多的 jquery ：P，现在唯一的问题是如果关闭了 javascript，我会丢失表格上的颜色，但这是一个小问题。

【解决方案2】：

$(document).ready(function () {
  $('.pretty tr').toggle(function() {
      $(this).find(':checkbox').attr('checked', true);

  }, function() {
      $(this).find(':checkbox').attr('checked', false);
  });
});

$(this).addClass('class'); 会做到的...

【讨论】：