如图:
左侧设置rowspan=2,右侧的周杰伦实际与3年级和二班是在同一tr中的。
现在有个需求:
点击左侧的多行,同时选中右侧,即点击左侧的checkbox框,右侧周杰伦和王涛同时被选中,也可以点击周杰伦或者王涛单个选中。
请问有好的解决思路吗,现在因为周杰伦这行和左侧实际是在同一个tr中的,造成选中判断复杂了。或者有什么办法可以使右侧的周杰伦单独一行?
使用表格table来写,就需要表格嵌套表格。
提供一个思路
<table border="1">
<tr>
<td>选择</td>
<td>年级</td>
<td>班级</td>
<td>选择</td>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr>
<td><input type="checkbox" name="1"></td>
<td>2年级</td>
<td>2班</td>
<td colspan="3">
<table border="1">
<tr>
<td><input type="checkbox" name="1"></td>
<td>周杰伦</td>
<td>11</td>
</tr>
<tr>
<td><input type="checkbox" name="1"></td>
<td>张学友</td>
<td>21</td>
</tr>
</table>
</td>
</tr>
</table>
这样布局就方便使用jquery进行dom操作。不管有多少个同学都可以在嵌套的table里面添加tr。
额,就是个多选和全选得逻辑应该,如果数据结构不复杂得话,
年级
A班
- 学生A
- 学生B
- B班
这样的话,是否可以考虑左右两侧的表格进行拆分,左侧显示年级 + 班级 ,右侧为对应班级的学生信息,在表格样式统一的情况下,应该是统一的,左侧年纪/班级的 rowsapan的数值对应右侧学生数组的长度。
仅我的一些想法,希望对你有帮助~
###有rowspan这个数字 想选中几行还不容易吗?