jquery动态合并表格行

最新推荐文章于 2021-11-19 15:55:14 发布
最新推荐文章于 2021-11-19 15:55:14 发布
阅读量257 收藏
点赞数
分类专栏： thinkphp 文章标签： js
原文链接：https://www.cnblogs.com/haoxl/p/5658772.html
版权

利用;原理来实现，其中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 动态增加删减行，并合并其中几行
weixin_44469852的博客
05-13 673
JQuery 动态增加删减行，并合并其中几行相同的数据
<jquery>jquery动态合并表格
sdjkjkjjk的专栏
06-23 3129
1.适用场景 在前端的表格数据展示中，有时候需要进行部分数据的行合并，如下图，将1的数据合并成2的样子。 2.调用规则 1.html 2.js 3.原理 用class来标记要合并处理的单元td，每个合并的列用不同的class标记，该方法会进行比较，相邻相同的列的html相同，则进行合并。该html内容可以包括隐藏主键。 在第三个参数中，如果为空，则不进行限制，
jquery合并表格行记录
04-23
NULL 博文链接：https://listen-raining.iteye.com/blog/2256318
jquery 制表 合并行
henry
12-08 243
function merge(){ var columsIndex = [0,9];//需要合并的列索引值 for (var k = 0; k &lt; columsIndex.length; k++) { var mergeIndex = 0;//定位需要添加合并属性的行数 var mark = 1; //计算每次需要合并的格子数 var trArr = $("#tableBo...
jQuery实现合并表格单元格中相同行操作示例
10-17
在本示例中，我们将通过jQuery实现合并表格中相同行的单元格操作。这种方法不仅能够帮助开发者减少重复的代码编写，还能快速实现动态数据展示的界面优化。通过具体实例的分析，我们将深入探讨其相关的操作技巧。 ...
jquery 动态合并单元格的实现方法
10-21
使用jQuery动态合并表格单元格是前端开发中的一个实用技能。在实现时需要考虑到表格结构的变化，以及在合并单元格后对多余的单元格进行处理。通过上述方法，我们可以灵活地控制表格的显示，以适应不同的数据展示需求...
jquery table合并行单元格
Coolyqq的专栏
09-09 2193
//合并行单元格   $.fn.rowspan=function(options){   if(!(this[0].tagName=='TABLE')){ throw new Error("选择器必须是table");  }  var defaults = {'td':1}  ;  var options = $.extend(defaults, options);    this.
jquery实现的相同行或列的合并
09-18
jquery实现的相同行或列的合并
jquery超好用的合并单元格
11-30
jquery封装超好用的合并单元格方法，很好用，欢迎大家下载使用。
jquery动态合并单元格-亲测有效
练习手
05-22 2633
&lt;script type="text/javascript"&gt; $(document).ready(function(){ heBingFunction("#Table");//传入的table的id }) function heBingFunction(tableObj){ var tr = $(tableObj).find("tbody tr"); var td = $...
jquery递归合并表格 行
yimeng123520的博客
01-25 306
/** * 操作表格 递归合并单元格 行 * 2019年1月25日16:00:41 */ (function($) { // 看过jquery源码就可以发现$.fn就是$.prototype, 只是为了兼容早期版本的插件 // 才保留了jQuery.prototype这个形式 $.fn.mergeCel...
jQuery实现HTML表格单元格的合并功能(合并内容相同的行或列)
weixin_30654583的博客
05-30 431
/** * desc : 合并指定表格（表格id为table_id）指定列（列数为table_colnum）的相同文本的相邻单元格 * @table_id 表格id : 为需要进行合并单元格的表格的id。如在HTMl中指定表格 id="data" ，此参数应为 #data * @table_colnum : 为需要合并单元格的所在列.参考jQuery中nth-child的参数.若为...
jquery操作表格 合并单元格
CodeMen_的博客
11-19 1420
$('#table_2').mergeCell({ cols: [7,8,9] ///参数为要合并的列，例如[0,5],表示第0和第5列 }); /** * 操作表格 合并单元格 行 * 2016年12月13日16:00:41 */ (function ($) { // 看过jquery源码就可以发现$.fn就是$.prototype, 只是为了兼容早期版本的插件 // 才保留了jQuery.prototype这个形.
【jQuery】实现table单元格行合并
BuptMelody的专栏
05-30 9823
目标： 从这样一张表中，合并相同元素为一列 最终期待效果为： 可以看到同一列中相同的元素被合并，这是怎么做到的呢，第一个想法是从每列的第一行数据开始遍历该列，当发现后一行数据跟前一行数据相同时删除该行同时给前一行的rowspan+1，但实际效果问题百出，为什么呢，是这样的，虽然后一行与前一行合并了，但是被合并行依然只占据它原本的位置，而被他合并的单元格的位置，则由各自同行的其他单元格取代它的位
jquery合并前几列单元格的方法
Demon丶冷漠
11-20 2506
       今天在合并单元格的时候出现了很多问题，现在记录如下，如果只是简单合并几列的话，下面介绍的方法都是可以用的！具体使用哪一种方法，各位看官自取所需吧，如果有更好的方法，欢迎各位在评论里给出，并且第二种方法如果有人有优化方案了，也可以告诉我，让我继续学习优化一下自己的方法，想看效果的可以直接到最后粘贴代码，给出全部代码（注意jquery包的导入哦）！良心推荐大家直接看第二种方法中的方法2！...
利用jquery-latest.js实现合并table多列重复行
LYBWWP
03-24 8724
$(function () { // 看过jquery源码就可以发现$.fn就是$.prototype, 只是为了兼容早期版本的插件 // 才保留了jQuery.prototype这个形式 $.fn.mergeCell = function (options) { return this.e
使用JQUERY动态合并表格单元格技巧
"此资源主要涉及使用JQUERY库在HTML表格中实现动态合并单元格的功能。" 在网页开发中，特别是涉及到数据展示时，有时需要对表格（table）中的单元格（TD）进行合并，以便更好地组织和显示信息。JQUERY是一个强大的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值