как переключить цвет ячейки по отдельности или в группе

Question

У нас есть простая таблица с скажем (матрица nxm), и пользователь случайным образом выберет набор записей на основе следующих условий.

Наш макет такой (просто псевдокод)

<table>
   <thead>
      <tr>
          c:forEach 1...31
          <th></th>
      </tr>
   </thead>

   <tbody>
       <tr> // could be 30 | 40 | 50 rows
           <td>1...31</td> // Just mentioned that there would be as much cells as looped on the c:forEach above
       </tr>
   </tbody>
</table>

a] При выборе ячейки мы бы хотели изменить цвет ячейки (т.е.) между синим и желтым.Цвет должен переключаться на определенный выбор ячейки.b] Если пользователь выбирает панель заголовка (например, от 1 до 31), соответствующий столбец (т. е. все ячейки в этом столбце) должен переключаться между синим, желтым

Мы думали использовать невидимые флажкиэто, но у нас нет логики javascript (мы используем jquery) для правильного выбора и отмены выбора.здесь нужны указатели, чтобы реализовать эту возможность.

Answer 1

Вы можете сделать что-то вроде этого, добавив соответствующие классы CSS:

Сделка с клетками:

$('table#yourtable').find('tbody td').click( function(){
    $(this).toggleClass('yellow');
    // flip yellow on or off
    // you can figure out how to deal with other states
});

Сделка с колонками:

$('table#yourtable').find('thead th').click( function(){
    var col = $(this).prevAll().length; // had siblings, should be prevall
    $('table#yourtable').find('tbody tr').each( function(){
        $(this)
            .find('td:eq('+col+')')  // nth column
            .removeClass('yellow blue neutral') // reset colors
            .addClass('green'); // add a color
    });
});

Не проверено, и это, несомненно, может быть дополнительно оптимизировано, но оно должно дать вам некоторые идеи.

Answer 2

jQuery - отличная библиотека. Вы можете использовать селектор nth-child() для извлечения таких вещей, как столбцы. Что-то вроде этого:

$('table thead th').click(function () {
  // Quick access to the index of this column.
  // Add an extra 1 to this because later nth-child is 1-indexed.
  var idx = $(this).prevAll('th').size() + 1;

  $('table tbody tr td:nth-child(' + idx + ')').css({
    'background-color': 'green'
  });
})

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