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

Question

我有一个带有“pretty”类的表。

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

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

我正在使用这个工作

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

});

除此之外，我希望单元格背景颜色在选中复选框时发生变化，如果取消选中则保持不变。

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

我尝试添加

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

以上内容没有运气:(

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

当我尝试 jquerytoggleClass 函数时，它似乎没有将其应用到已经存在的 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; }

Answer 1

查看此DEMO

Jquery 的替代方案是 HERE

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