Jquery 更改表格单元格的背景色并选中复选框

我有一张“漂亮”班的桌子

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

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

我用它工作

$(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，这使得表中的数据每行的颜色不同

当我尝试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; }

$（this）.addClass（'class'）；

将完成它…

请参见此

Jquery的另一种选择是

---

让我们检查一下演示。我不确定这是最好的方法。

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

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

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