jquery - 如何单独或成组切换单元格颜色

Question

我们有一个带有 say(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
    });
});

没有测试，这无疑可以进一步优化，但它应该给你一些想法。