jquery动态合并表格行

利用<td rowspan = "num"/>;原理来实现，其中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>

jquery动态合并表格行的更多相关文章

jquery 动态添加表格行
jquery 动态添加表格行 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <h ...
第84天：jQuery动态创建表格
jQuery动态创建表格 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
element 动态合并表格
前言 element 官方的例子太简单了,不满足实际的需求数据肯定是动态的,合并的行数,列数都是动态的,该如何知道每一行的合并数呢需求动态合并表格,数据来源于数据库正文一开始,我的数据源是单 ...
合并表格行---三层for循环遍历数据
合并表格行---三层for循环遍历数据示例1 json <!DOCTYPE html> <html lang="zh_cn"> <head> ...
jQuery动态对表格Table进行添加或删除行以及修改列值操作
jQuery,不仅可以以少量的代码做很多操作,而且兼容性好(各种浏览器,各种版本). 下面用jQuery动态对表格Table进行添加或删除行以及修改列值操作 1.jQuery代码 <script ...
编辑表格输入内容、根据input输入框输入数字动态生成表格行数、编辑表格内容提交传给后台数据处理
编辑表格输入内容.根据input输入框输入数字动态生成表格行数.编辑表格内容提交传给后台数据处理记录自己学习做的东西,写的小demo,希望对大家也有帮助! 代码如下: <!DOCTYPE ht ...
jquery动态创建表格
1.代码实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
Jquery动态插入table行
想在一个<table id="table1"></table>标签中动态的插入行,在jquery中可以这样做: $("#table1") ...
JQuery动态操作表格
新人,小白一枚,刚刚参加工作,所以会在这里记录一些遇到的问题. 最近要做的东西,是对一个表格动态的添加行,删除行,并且对表格中内容进行非空验证. <!DOCTYPE html> <h ...

随机推荐

jquery $.extend()扩展插件获取焦点或失去焦点事件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
【web开发 | 移动APP开发】 Web 移动开发指南（2017.01.05更新）
版本记录 - 版本1.0 创建文章(2016.12.30) - 版本1.1 更正了hybird相关知识:增加了参考文章(2017.01.05): + Web APP更正为响应式移动站点与页面,简称响应 ...
PHP编码规范PSR-2
.note-content { font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", STHeit ...
18. class
Class 基本用法 class n { constructor(x,y) { this.x = x; this.y = y; console.log(x,y) } proint() { consol ...
java 学习框架
例如 Jsp.Velocity.Tiles.iText 和 POI.Spring MVC框架并不知道使用的视图,所以不会强迫您只使用 JSP 技术.
python api
import requests #查询手机好归属地API def phone(tel): url = 'http://op.juhe.cn/onebox/phone/query' appkey = ' ...
Java的输入方式总结
写java代码的时候,经常会遇到的情况就是输入输错了怎么办?大部分想的是用一个if判断,但是用if判断的话我们就无法让用户再次输入,因为if语句程序执行后就会直接退出程序.因此要想实现循环就要用whi ...
Tomcat 知识点
Tomcat(重点) Tomcat是一个符合于Java EE Web标准的最小web容器,所有的jsp程序一定需要有WEB容器的的支持才可以运行,而且在给定的WEB容器里面会支持事务处理操作. Tom ...
C++ 之namespace常见用法
一.背景需要使用Visual studio的C++,此篇对namespace的常用用法做个记录. 二.正文 namespace通常用来给类或者函数做个区间定义,以使编译器能准确定位到适合的类或者函数 ...
PG 中 JSON 字段的应用
13 年发现 pg 有了 json 类型,便从 oracle 转 pg,几年下来也算比较熟稔了,总结几个有益的实践. 用途一:存储设计时无法预料的文档性的数据.比如,通常可以在人员表准备一个 json ...

jquery动态合并表格行

jquery动态合并表格行的更多相关文章

随机推荐

热门专题