ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

jquery动态合并表格行

2021-01-26 18:31:34  阅读：165  来源： 互联网

标签：jquery 表格 startCell tr tbl var 动态 eq find


利用;原理来实现，其中num为要合并的行数。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        td{
            border:1px solid red;
        }
    </style>
</head>
<body>
<table class="table mbn tc-med-1 tc-bold-last tc-fs13-last" id="table1">
    <thead>
    <tr>
        <th>品牌</th>
        <th>车型</th>
        <th>性别</th>
        <th>配额数</th>
        <th>完成数</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>宝马</td>
        <td>3系</td>
        <td>男</td>
        <td>200</td>
        <td>100</td>
    </tr>
    <tr>
        <td>宝马</td>
        <td>3系</td>
        <td>女</td>
        <td>100</td>
        <td>57</td>
    </tr>
    <tr>
        <td>宝马</td>
        <td>5系</td>
        <td>男</td>
        <td>100</td>
        <td>68</td>
    </tr>
    <tr>
        <td>宝马</td>
        <td>5系</td>
        <td>女</td>
        <td>200</td>
        <td>94</td>
    </tr>
    <tr>
        <td >宝马</td>
        <td>7系</td>
        <td>男</td>
        <td>100</td>
        <td>68</td>
    </tr>
    <tr>
        <td>宝马</td>
        <td>7系</td>
        <td>女</td>
        <td>100</td>
        <td>68</td>
    </tr>
    </tbody>
</table>
</body>
</html>
<script src="design/static/js/jquery.js"></script>
<script src="design/static/js/jquery-ui-1.10.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);
        $("#table1").rowspan(2);
        $("#table1").rowspan(3);
    });
</script>

其它几种方法：

<!DOCTYPE html>
<html>
<head>
    <title>merge.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="css/jquery-ui.css" />
    <script src="design/static/js/jquery.js"></script>
    <script src="design/static/js/jquery-ui-1.10.min.js"></script>
    <script type="text/javascript">
        function merge1(){ //可实现单元格，通过给 开始cell的比较
            var totalRow = $("#tbl").find("tr").length;
            var totalCol = $("#tbl").find("tr").eq(0).find("td").length;
            for(var col=totalCol-1;col>=1;col--){
                spanNum =1;
                startCell = $("#tbl").find("tr").eq(totalRow-1).find("td").eq(col);
                for(var row = totalRow-1;row>=1;row--){
                    targetCell = $("#tbl").find("tr").eq(row-1).find("td").eq(col);
                    if(startCell.text() == targetCell.text() && startCell.text()!=""){
                        spanNum++;
                        targetCell.attr("rowSpan",spanNum);
                        startCell.remove();
                    }else{
                        spanNum =1;
                    }
                    startCell = targetCell;
                }
            }
        }
        function merge2() { //可实现合并单元格,上下行来比较
            var totalCols = $("#tbl").find("tr:eq(0)").find("td").length;
            var totalRows = $("#tbl").find("tr").length;
            for ( var i = totalCols-1; i >= 1; i--) {
                for ( var j = totalRows-1; j >= 1; j--) {
                    startCell = $("#tbl").find("tr").eq(j).find("td").eq(i);
                    targetCell = $("#tbl").find("tr").eq(j - 1).find("td").eq(i);
                    if (startCell.text() == targetCell.text() && targetCell.text() != "") {
                        targetCell.attr("rowSpan", (startCell.attr("rowSpan")==undefined)?2:(eval(startCell.attr("rowSpan"))+1));
                        startCell.remove();
                    }
                }
            }
        }
        /*先合并，使用style 的display:none将相同元素隐藏，然后再remove
         */
        function merge3(){
            var totalCols = $("#tbl").find("tr:eq(0)").find("td").length;
            var totalRows = $("#tbl").find("tr").length;
            for(var col=totalCols-1;col>=1;col--){
                spanNum =1;
                startCell = $("#tbl").find("tr").eq(totalRows-1).find("td").eq(col);
                for(var row = totalRows-1;row>=1;row--){
                    targetCell = $("#tbl").find("tr").eq(row-1).find("td").eq(col);
                    if(startCell.text() == targetCell.text() && startCell.text()!=""){
                        spanNum++;
                        targetCell.attr("rowSpan",spanNum);
                        startCell.attr("style","visibility:hidden");
// startCell.attr("style","display:none"); 
                    }else{
                        spanNum =1;
                    }
                    startCell = targetCell;
                }
            }
            for(var j=totalCols-1;j>=1;j--){
                for(var i=totalRows-1;i>=1;i--){
                    cell = $("#tbl").find("tr").eq(i).find("td").eq(j);
                    if(cell.attr("style")!=undefined){
                        if(cell.attr("style")=="visibility:hidden"){
                            cell.remove();
                        }
                    }
                }
            }
        }
        function merge4(){ //与merge3方法类似，目的是看一下 display:none与visibility:hidden的效果区别
            var totalCols = $("#tbl").find("tr:eq(0)").find("td").length;
            var totalRows = $("#tbl").find("tr").length;
            for(var col=totalCols-1;col>=1;col--){
                spanNum =1;
                startCell = $("#tbl").find("tr").eq(totalRows-1).find("td").eq(col);
                for(var row = totalRows-1;row>=1;row--){
                    targetCell = $("#tbl").find("tr").eq(row-1).find("td").eq(col);
                    if(startCell.text() == targetCell.text() && startCell.text()!=""){
                        spanNum++;
                        targetCell.attr("rowSpan",spanNum);
                        startCell.attr("style","display:none");
// startCell.attr("style","display:none"); 
                    }else{
                        spanNum =1;
                    }
                    startCell = targetCell;
                }
            }
            for(var j=totalCols-1;j>=1;j--){
                for(var i=totalRows-1;i>=1;i--){
                    cell = $("#tbl").find("tr").eq(i).find("td").eq(j);
                    if(cell.attr("style")!=undefined){
                        if(cell.attr("style")=="display:none"){
                            cell.remove();
                        }
                    }
                }
            }
        }
    </script>
</head>
<body>
<table id="tbl" cellpadding="3" border=1>
    <thead>
    <tr>
        <td>销售时间</td>
        <td>裙子</td>
        <td>裤子</td>
        <td>风衣</td>
        <td>鞋子</td>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>8:00-9:00</td>
        <td>3</td>
        <td>2</td>
        <td>4</td>
        <td>3</td>
    </tr>
    <tr>
        <td>9:00-10:00</td>
        <td>3</td>
        <td>2</td>
        <td>5</td>
        <td>3</td>
    </tr>
    <tr>
        <td>10:00-11:00</td>
        <td>3</td>
        <td>2</td>
        <td>5</td>
        <td>1</td>
    </tr>
    <tr>
        <td>11:00-12:00</td>
        <td>2</td>
        <td>2</td>
        <td>4</td>
        <td>1</td>
    </tr>
    </tbody>
</table>
<input type="button" value="合并" id="merge" onclick="merge2();">
</body>
</html>

转载：
作者：haoxl
出版：https://www.cnblogs.com/haoxl/p/5658772.html

标签：jquery,表格,startCell,tr,tbl,var,动态,eq,find
来源： https://blog.csdn.net/qq_37363320/article/details/113186506

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有