[英]Change background colour on table cell and check checkbox
I have have a table with the class "pretty". 我有一个带有“漂亮”类的表。
Each row has a checkbox next to it that selects the data using a form. 每行旁边都有一个复选框,用于使用表单选择数据。
I want to be able to click the cell and have the checkbox ticked/unticked. 我希望能够单击该单元格并选中/取消选中该复选框。
I have this working using 我有使用这个
$(document).ready(function () {
$('.pretty tr').toggle(function() {
$(this).find(':checkbox').attr('checked', true);
}, function() {
$(this).find(':checkbox').attr('checked', false);
});
}); });
In addition to this I want the cells background colour to change when the checkbox has been selected and unchange if its deselected. 除此之外,我希望选中复选框时更改单元格背景色,如果取消选中则不更改。
I have not had any luck doing this, any idea's? 我没有运气,有什么主意吗?
I have tried adding 我尝试添加
$(this).addClass('cssclassname');
To the above with no luck :( 到上面没有运气:(
Edit just an update the class "pretty" already has the following css which makes the data in the table differ in colour for each row. 仅编辑更新,“ pretty”类已经具有以下css,这使表中的数据的每一行颜色不同。
It seems when I try the jquery toggleClass function it doesn't apply it over the already existing 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; }
$(document).ready(function () {
$('.pretty tr').toggle(function() {
$(this).find(':checkbox').attr('checked', true);
}, function() {
$(this).find(':checkbox').attr('checked', false);
});
});
$(this).addClass('class');
will do it... 会做的...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.