前端table设置rowspan的问题?

如图:
image.png

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

阅读 2.9k
3 个回答

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

image.png
这样布局就方便使用jquery进行dom操作。不管有多少个同学都可以在嵌套的table里面添加tr。

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

  • 年级

    • A班

      • 学生A
      • 学生B
    • B班

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题