我们有一个带有 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)逻辑来正确选择和取消选择。此处需要指导,以实现此功能。
最佳答案
在添加适当的 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
});
});
没有测试,这无疑可以进一步优化,但它应该给你一些想法。
关于jquery - 如何单独或成组切换单元格颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3261979/