Показать сообщение отдельно
  #1 (permalink)  
Старый 31.01.2017, 11:02
Новичок на форуме
Отправить личное сообщение для IvanDaMaria Посмотреть профиль Найти все сообщения от IvanDaMaria
 
Регистрация: 31.01.2017
Сообщений: 2

Смена checkbox и цвета ячейки в таблице
Ответ на решение частично здесь , хочу развить. Ниже мой пример и реализация оттуда, прошу помощь объединить.

Есть html таблица, с особенными ячейками. Каждая ячейка "особенная" содержит один checkbox. Смысл в том чтобы менять её цвет кликом и устанавливать в checkbox флаг. Менять только у этих особенных. Они имеют класс в тэг <td>.

Реализовал смену цвета при установке флага в checkbox. Не знаю как сменить цвет кликом по ячейке. Не знаю как соединить это с флагом у checkbox, чтобы я с ним работать смог.

var boxes = $("input:checkbox"); 
var table = document.forms["table"];
var elements = table.getElementsByTagName('td');
var checkTd

//из всех ячеек выбираются только "особенные"
for (var i = 0; i < elements.length; i++) 
{
     if (elements[i].className == 'select_checkbox') 
      { checkTd +=elements[i]; }
}

$("input:checkbox").on("change", function () 
{ 
 
 for (var k = 0; k < boxes.length; k++) 
 {
   var checkbox = boxes[k];
   if ($(checkbox).prop('checked')) 
   { 
      if (checkbox == checkTd[k]) //если ячейка и checkbox по номеру совпали
      { checkTd[k].bgColor = '#ccc';}
     
      //далее шла работа с выбранными checkbox
   }
 }
     
});


Вот так выглядит "особенная" ячейка:

Код:
<td class="select_checkbox" onclick = "cellClick(td)">
Вот код по ссылке в начале.

function cellClick(td) {
        
        td.bgColor = '#006699';
        
        for (var childItem in td.childNodes) {
            if (td.childNodes[childItem].nodeType == 1)
            {
                td.childNodes[childItem].checked = true;
                td.querySelector("input[type=checkbox]").checked = true;
            }
        }
Ответить с цитированием