Javascript Jquery - Изменить цвета ячейки таблицы при нажатии флажка

Question

Javascript Jquery - Изменить цвета ячейки таблицы при нажатии флажка

0

Я создаю матрицу пересечений, где я бы пересекал записи; как мужчины и женщины. Я сделал это, используя динамически сгенерированную таблицу, где каждая ячейка относится к кресту женщины.

Выглядит так:

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? а также, как я могу идентифицировать каждую ячейку и знать значение (крест), к которому она относится? Если это dynamic-, количество мужчин и женщин неопределенно и меняется, так что количество ячеек и флажков также неопределено?

muffin 03 окт. 2013, в 06:36

Источник

1

Что именно входит ... так далее и так далее? Не ожидайте, что мы угадываем ваш код. Воспроизведите это в jsfiddle.
Samuel Liew♦ 03 окт. 2013, в 03:53

Теги:

javascript

jquery

html-table

matrix

checkbox

1 ответ

Ещё вопросы

Что именно входит ... так далее и так далее? Не ожидайте, что мы угадываем ваш код. Воспроизведите это в jsfiddle.

ps2goat · Accepted Answer · 2013-10-03T02-27-00.000Z

Это предполагает, что вы хотите сделать зеленый, когда он установлен, красный, если нет. Вы точно не сказали нам, что.

Найдите родительский элемент флажка. Я делаю это с родителями() всегда, потому что, если элемент добавляется в стек позже, ваш код становится прикрученным, и вы не знаете, почему.

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

Добавьте в экранированные кавычки, где это необходимо, чтобы заставить это работать с командой php echo.