table表格合并列中相同的内容栏

转自:https://blog.csdn.net/qq_34129814/java/article/details/80255444

页面的table表格中又是需要将相同的数据栏合并,今天就学到了一个简单实用有效的方法:

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
 
    <table id="table1">
        <tr>
            <td>111</td>
            <td>222</td>
            <td>333</td>
        </tr>
        <tr>
            <td>111</td>
            <td>555</td>
            <td>333</td>
        </tr>
        <tr>
            <td>111</td>
            <td>888</td>
            <td>333</td>
        </tr>
        <tr>
            <td>aaa</td>
            <td>bbb</td>
            <td>333</td>
        </tr>
    </table>
 
    <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <script>
 
    jQuery.fn.rowspan = function(colIdx) { //封装的一个JQuery小插件
          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);//传入的参数是对应的列数从0开始  第一列合并相同
          // $("#table1").rowspan(1);//传入的参数是对应的列数从0开始  第二列合并相同
       });
    </script>
 
</script>
</html>
复制代码

合并前:(手绘和以上HTML代码不同)

111 222 333
111 555 333
444 111 333
222 666 888

合并后:(合并第一列中相同的数据)

111 222 333
    555 333
444 111 333
222 666 888

其实合并的数据默认居中显示

该方法较为实用,进行封装后,其他页面引用调用较为简单 且可以根据具体需求去改变    
大赞!!!

真滴大赞!

 

posted @   xh_Blog  阅读(878)  评论(0编辑  收藏  举报
编辑推荐:
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行:
· winform 绘制太阳,地球,月球 运作规律
· AI与.NET技术实操系列(五):向量存储与相似性搜索在 .NET 中的实现
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)
点击右上角即可分享
微信分享提示