Javascript Jquery - 单击复选框更改表格单元格颜色答案

【问题标题】：Javascript Jquery - Change table cell colors upon checkbox clickJavascript Jquery - 单击复选框更改表格单元格颜色
【发布时间】：2017-07-24 23:45:42
【问题描述】：

我正在创建一个交叉矩阵，我将在其中交叉条目；像男性和女性。我使用动态生成的表格来做到这一点，其中每个单元格都与女性的十字架有关。

看起来像这样：

Female/Male | Male1 | Male2 |
------------------------------
Female1     |   x   |   x   |
------------------------------
Female2     |   x   |   x   |
-----------------------------

上面是一个表格，每个单元格都包含一个用于标识十字的复选框。

下面是我使用php生成表格的代码：

<table>
<?php
    foreach($females...){
       echo "<tr>";
       ...so on
       //set up the rows and headers
       foreach($males...){
              echo "<td ...><input type='checkbox'../></td>
              ..and so on
       }    
    }

?>
</table>

我需要在单击其中的复选框时将单元格着色为绿色或红色。如何在 Jquery/Javascript? 中执行此操作，以及如何识别每个单元格，并知道它所属的值（交叉）？如果它是动态的 - 男性和女性的数量是不定且不断变化的，因此单元格和复选框的数量也是不定的？

【问题讨论】：

究竟发生了什么...等等和..等等？不要指望我们猜你的代码。在 jsfiddle 中重现它。

标签： javascript jquery matrix checkbox html-table

【解决方案1】：

这假设您想要在选中时执行绿色，不选中时执行红色。你没有准确地告诉我们是哪一个。

找到复选框的父级。我总是使用 parents() 这样做，因为如果稍后将一个元素添加到堆栈中，您的代码就会搞砸并且您不知道为什么。

<td ...><input type='checkbox' 
         onclick="$(this).parents('td').css('background-color', $(this).is(':checked') ? 'green' : 'red');" />
</td>

在必要时添加转义引号以使其与 php 的 echo 命令一起使用。

【讨论】：