前端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。