当前位置: 首页 > article >正文

layui合并table相同内的行

   <table border="1" id="table1" class="layui-table">
       <thead>
           <tr>
               <th><b>姓名</b></th>
               <th><b>项目</b></th>
               <th><b>任务</b></th>
               <th><b>日报</b></th>
               <th><b>备注</b></th>
           </tr>
       </thead>
       <tbody id="tbody">
           @{
               if (ViewBag.List != null && ViewBag.List.Count > 0)
               {
                   for (int i = 0; i < ViewBag.List.Count; i++)
                   {
                       <tr>
                           <td>@ViewBag.List[i].Username</td>
                           <td>@ViewBag.List[i].ProjectName</td>
                           <td>@ViewBag.List[i].TaskName</td>
                           <td>@ViewBag.List[i].Daily</td>
                           <td>@ViewBag.List[i].Remark</td>
                       </tr>
                   }
               }
           }
       </tbody>
   </table>
 <script>
     //合并table的相同内容行
     jQuery.fn.rowspan = function (colIdx) {
         return this.each(function () {
             var that;
             $('tr', this).each(function (row) {
                 $('td:eq(' + colIdx + ')', this).filter(':visible').each(function (col) {
                     if (that != null && $(this).html() == $(that).html()) {
                         rowspan = $(that).attr("rowSpan");
                         if (rowspan == undefined) {
                             $(that).attr("rowSpan", 1);
                             rowspan = $(that).attr("rowSpan");
                         }
                         rowspan = Number(rowspan) + 1;
                         $(that).attr("rowSpan", rowspan);
                         $(this).hide();
                     } else {
                         that = this;
                     }
                 });
             });
         });
     }
     //调用
     $(function () {
         $("#table1").rowspan(0);//合并第1列
         $("#table1").rowspan(1);//合并第2列
         $("#table1").rowspan(2);//合并第3列
     });
 </script>


效果如图:


http://www.kler.cn/a/402682.html

相关文章:

  • Java 8 Stream API 在数据转换中的应用 —— 将列表转换为映射
  • A045-基于spring boot的个人博客系统的设计与实现
  • 近源渗透|HID ATTACK从0到1
  • 大数据背景下信息通信网络安全管理管理策略研究
  • CPU命名那些事
  • 硬中断关闭后的堆栈抓取方法
  • web——sqliabs靶场——第十三关——报错注入+布尔盲注
  • 告别反馈滞后!看板管理让UX设计流程更流畅
  • 208.实现前缀树 207.课程表
  • 22.UE5控件切换器,存档列表,
  • aws上安装ssm-agent
  • 16:00面试,16:06就出来了,问的问题有点变态。。。
  • 【蓝桥杯C/C++】翻转游戏:多种实现与解法解析
  • 【云原生开发】K8S集群调度资源deployment,daemonset,statefulset,cronjob,节点管理等开发设计与实现
  • 开源模型应用落地-Qwen2.5-7B-Instruct与vllm实现离线推理-性能分析(四)
  • C++游戏开发面试题及参考答案
  • [java] 2024--今日头条面试题及参考答案
  • 非对称之美(贪心)
  • 基于SpringBoot的“简历系统”的设计与实现(源码+数据库+文档+PPT)
  • 梳理游戏就业的方向
  • ArcGIS Pro ADGeoProcessing DAML
  • Neo4j下载及其Cypher语法介绍
  • Rust中::和.的区别
  • 自动化立体仓库:详解
  • jvm虚拟机基础学习笔记--黑马程序员--1
  • 聊聊Flink:Flink的分区机制