Jquery 选中复选框时设置表格单元格以突出显示颜色的最干净方法

我希望创建一个html表格，显示包含不同类型节目的彩色编码广播时间表。例如，周一中午，我们将播放“体育”类节目。该表为7天，每天每小时1行。空单元格只是白色的

我将手工编写表格代码，因此我将能够使用css识别带有类别的表格单元格。也许这就像高中足球赛

在下表中，我将显示类别及其旁边的复选框。当用户单击该复选框时，我希望表中所有使用该类编码的单元格都“打开”——这意味着它们将颜色从默认的、未高亮显示的颜色更改为更亮的颜色。淡黄色变成亮黄色等

基本html如下所示：

<table border=1>
<tr>
<th>Time</th>
<th>Monday</th>
<th>Tuesday</th>
</tr>

<tr>
<td>11am</td>
<td></td>
<td></td>
</tr>

<td>12 noon</td>
<td>High School Football game</td>
<td></td>
</tr>

<td>1pm</td>
<td></td>
<td></td>
</tr>
</table>
<form>
<input type="checkbox">Sports</input>
</form>

时间
星期一
星期二
上午11点
中午12点
高中足球赛
下午1点
体育

您必须向表中的元素添加一个标志以突出显示它们。一个custum属性或一个类就可以做到这一点

<td data-type="sports" >High School Football game</td>
<input type="checkbox">Sports</input>

$('input[type="checkbox"]').click(function () {
    if ($(this)[0].checked)
    {
        $("[data-type='"+ $(this).val() +"']).addClass("yellowhighlight");
    }
    else
    {
        $("[data-type='"+ $(this).val() +"']).removeClass("yellowhighlight");

    }

});

代码未经测试，但我希望您能理解。

我刚刚做了一个测试，您可以从中继续。我在复选框中添加了名称

sports

，在

中添加了类

sports

，并添加了带有背景色的类

.active

。跟随jquery

$("input[name='sports']").on("click", function () {
 $(".sports").toggleClass("active");
});

在每次单击时切换类

活动
。您可以添加对输入
checked
状态的检查，而不只是在每次单击时进行更改

供参考：

$("input[name='sports']").on("click", function () {
 $(".sports").toggleClass("active");
});