问答

前端table设置rowspan的问题?

作者:admin 2021-05-07 我要评论

如图: 左侧设置rowspan=2,右侧的周杰伦实际与3年级和二班是在同一tr中的。 现在有个需求: 点击左侧的多行,同时选中右侧,即点击左侧的checkbox框,右侧周杰...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

如图:
image.png

左侧设置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>

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

###

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

  • 年级

    • A班

      • 学生A
      • 学生B
    • B班

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

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

###

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

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • 前端table设置rowspan的问题?

    前端table设置rowspan的问题?

  • 浮点数除以pow(10, n)会出现精度丢失问

    浮点数除以pow(10, n)会出现精度丢失问

  • 使用ant-design的表格,希望点击排序之

    使用ant-design的表格,希望点击排序之

  • 同样访问一个网址,为什么java执行没问

    同样访问一个网址,为什么java执行没问

腾讯云代理商
海外云服务器