jQuery实现HTML表格单元格的合并功能(合并内容相同的行或列)


/**
 * desc : 合并指定表格(表格id为table_id)指定列(列数为table_colnum)的相同文本的相邻单元格
 * @table_id 表格id : 为需要进行合并单元格的表格的id。如在HTMl中指定表格 id="data" ,此参数应为 #data
 * @table_colnum : 为需要合并单元格的所在列.参考jQuery中nth-child的参数.若为数字,从最左边第一列为1开始算起;"even" 表示偶数列;"odd" 表示奇数列; "3n+1" 表示的列数为1、4、7、......
 * @table_minrow ? : 可选的,表示要合并列的行数最小的列,省略表示从第0行开始 (闭区间)
 * @table_maxrow ? : 可选的,表示要合并列的行数最大的列,省略表示最大行列数为表格最后一行 (开区间)
 */

function table_rowspan(table_id, table_colnum) {
    if (table_colnum == "even") {
        table_colnum = "2n";
    }
    else if (table_colnum == "odd") {
        table_colnum = "2n+1";
    }
    else {
        table_colnum = "" + table_colnum;
    }
    var cols = [];
    var all_row_num = $(table_id + " tr td:nth-child(1)").length;
    var all_col_num = $(table_id + " tr:nth-child(1)").children().length;
    if (table_colnum.indexOf("n") == -1) {
        cols[0] = table_colnum;
    }
    else {
        var n = 0;
        var a = table_colnum.substring(0, table_colnum.indexOf("n"));
        var b = table_colnum.substring(table_colnum.indexOf("n") + 1);
        a = a ? parseInt(a) : 1;
        b = b ? parseInt(b) : 0;
        while (a * n + b <= all_col_num) {
            cols[n] = a * n + b;
            n++;
        }
    }
    var table_minrow = arguments[2] ? arguments[2] : 0;
    var table_maxrow = arguments[3] ? arguments[3] : all_row_num + 1;
    var table_firsttd = "";
    var table_currenttd = "";
    var table_SpanNum = 0;
    for (var j = 0; j < cols.length; j++) {
        $(table_id + " tr td:nth-child(" + cols[j] + ")").slice(table_minrow, table_maxrow).each(function (i) {
            var table_col_obj = $(this);
            if (table_col_obj.html() != " ") {
                if (i == 0) {
                    table_firsttd = $(this);
                    table_SpanNum = 1;
                }
                else {
                    table_currenttd = $(this);
                    if (table_firsttd.text() == table_currenttd.text()) {
                        table_SpanNum++;
                        table_currenttd.hide(); //remove();
                        table_firsttd.attr("rowSpan", table_SpanNum);
                    } else {
                        table_firsttd = $(this);
                        table_SpanNum = 1;
                    }
                }
            }
        });
    }
}
/**
 * desc : 合并指定表格(表格id为table_id)指定行(行数为table_rownum)的相同文本的相邻单元格
 * @table_id 表格id : 为需要进行合并单元格的表格的id。如在HTMl中指定表格 id="data" ,此参数应为 #data
 * @table_rownum : 为需要合并单元格的所在行.参考jQuery中nth-child的参数.若为数字,从最左边第一列为1开始算起;"even" 表示偶数行;"odd" 表示奇数行; "3n+1" 表示的行数为1、4、7、......
 * @table_mincolnum ? : 可选的,表示要合并行中的最小列,省略表示从第0列开始(闭区间)
 * @table_maxcolnum ? : 可选的,表示要合并行中的最大列,省略表示表格的最大列数(开区间)
 */
function table_colspan(table_id, table_rownum) {
    var table_mincolnum = arguments[2] ? arguments[2] : 0;
    var table_maxcolnum;
    var table_firsttd = "";
    var table_currenttd = "";
    var table_SpanNum = 0;
    $(table_id + " tr:nth-child(" + table_rownum + ")").each(function (i) {
        table_row_obj = $(this).children();
        table_maxcolnum = arguments[3] ? arguments[3] : table_row_obj.length;
        table_row_obj.slice(table_mincolnum, table_maxcolnum).each(function (i) {
            if (i == 0) {
                table_firsttd = $(this);
                table_SpanNum = 1;
            } else if ((table_maxcolnum > 0) && (i > table_maxcolnum)) {
                return "";
            } else {
                table_currenttd = $(this);
                if (table_firsttd.text() == table_currenttd.text()) {
                    table_SpanNum++;
                    if (table_currenttd.is(":visible")) {
                        table_firsttd.width(parseInt(table_firsttd.width()) + parseInt(table_currenttd.width()));
                    }
                    table_currenttd.hide(); //remove();
                    table_firsttd.attr("colSpan", table_SpanNum);
                } else {
                    table_firsttd = $(this);
                    table_SpanNum = 1;
                }
            }
        });
    });
}
//调用  : 代表把id为recordTb的表格的第一列,相同内容合并
table_rowspan("#recordTb",1);

本章引自:http://www.jb51.net/article/81977.htm

原文地址:https://www.cnblogs.com/mf001/p/9109161.html

时间: 2024-10-02 08:56:22

jQuery实现HTML表格单元格的合并功能(合并内容相同的行或列)的相关文章

jQuery实现HTML表格单元格的合并功能

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <sc

使用vue自定义指令合并iview表格单元格

使用vue自定义指令合并iview表格单元格, 我们在开发过程中发现iview表格组件,官网只提供了合并表头的demo,并没有合并表格中的单元格. ivew表头分组:https://www.iviewui.com/components/table#BTFZ 效果图如下: 具体实现思路,通过vue自定义属性来操作dom,达到我们想要的效果: 代码如下: demo.vue  表格页面 <template> <div class="demo"><Table :c

关于html表格单元格宽度的计算规则

* { margin: 0; padding: 0 } body { background: #fafafa } ul,li { list-style: none } h1 { margin: 20px 0 } h2 { margin: 15px 0 } h3 { margin: 10px 0 } p { margin: 5px 0; border-left: 5px solid #ddd; padding-left: 10px } .table-wrap { } .tb-fixed { tab

如何实现可编辑表格单元格效果

如何实现可编辑表格单元格效果:在不少的网页都有这样的效果,可以编辑表格中的内容,非常的方便,在本站特效下载和网络上有一个可编辑单元格的实例,但是通过分析发现有诸多问题,最大一个问题就是浏览器不具有浏览器兼容性,所以本站写了一个简单的能偶兼容所有主流浏览器的效果,下面就通过实例简单介绍一下如何实现可以编辑单元格的效果,代码实例如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&q

javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行

jsp页面表格布局Html代码 <body > <center> <input type="text" value="111" id="mytext"> <table border="1" width="60%" id="mytable"> <tr> <td id="td1">第一行第一列<

table表格单元格中的内容如何强制换行

table表格单元格中的内容如何强制换行:有时候表格单元格中的内容不会换行,那么这个就会严重影响到用户体验,下面就简单介绍一下如何实现单元格中的内容换行.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.51texiao.cn/" />

Rdlc技巧,rdlc报表中获取文本框或某个表格单元格中的内容

在RDLC报表中,随意摆放的控件,排列看起来很整齐,但是生成WEB后看就不是很友好了,导出PDF可能又是一个样, 解决这个办法就是把这些摆放在一个容器内,比如Table 内 用ReportItems这个属性来取value值.细节如下 =ReportItems!textbox1.Value + ReportItems!textbox12.Value 注意,页头页脚可以取Body里的值,但是Body里不可以取页头与页脚的值 Rdlc技巧,rdlc报表中获取文本框或某个表格单元格中的内容

自定义表格单元格,及格式化日期字符串的示例

该实例演示在表格单元格中展示格式化的日期,并且使用UIDatePicker控件编辑日期. 实例使用分组风格的UITableViewController,用两种不同的UITableViewCell分别显示主要标题和NSDate数值,通过一个内建的名为UITableViewCellStyleValue1的单元格类型实现左右显示文本. 作为表格的委托,实例使用didSelectRowAtIndexPath方法打开UIDatePicker控件.UIDatePicker的动作方法将直接修改自定义表格单元格

IOS 取消表格单元格 TableViewCell 去掉高亮状态 点击Cell取消选择状态

以下是两种实现效果 1. 自定义cell 继承UITableViewCell 重写 -(void)setSelected:(BOOL)selected animated:(BOOL)animated { } -(void)setHighlighted:(BOOL)highlighted animated:(BOOL)animated { } 里面不写任何东西 注意重写的时候一定要有带animated 方法,不然还是无效 2.点击单元格 取消选中单元格 //  点击单元格的时候取消选中单元格 -(