前端table设置rowspan的问题？

Question

如图：

左侧设置rowspan=2，右侧的周杰伦实际与3年级和二班是在同一tr中的。
现在有个需求：
点击左侧的多行，同时选中右侧，即点击左侧的checkbox框，右侧周杰伦和王涛同时被选中，也可以点击周杰伦或者王涛单个选中。
请问有好的解决思路吗，现在因为周杰伦这行和左侧实际是在同一个tr中的，造成选中判断复杂了。或者有什么办法可以使右侧的周杰伦单独一行?

Answer 1

使用表格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。

Answer 2

额，就是个多选和全选得逻辑应该，如果数据结构不复杂得话，

• 年级

  • A班

    • 学生A
    • 学生B
  • B班

这样的话，是否可以考虑左右两侧的表格进行拆分，左侧显示年级 + 班级 ，右侧为对应班级的学生信息，在表格样式统一的情况下，应该是统一的，左侧年纪/班级的 rowsapan的数值对应右侧学生数组的长度。

仅我的一些想法，希望对你有帮助~

Answer 3

有rowspan这个数字 想选中几行还不容易吗？