20120802-TableMerger前端纯js单元格合并

已于 2024-05-21 12:53:29 修改
阅读量226 收藏
点赞数
分类专栏： 前端 js 文章标签： javascript 前端 html
于 2022-11-18 09:33:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jack_software/article/details/127915676
版权
前端 同时被 2 个专栏收录
3 篇文章 0 订阅
订阅专栏
js
3 篇文章 0 订阅
订阅专栏

关注公众号 `N学无止界` 获取更多

TableMerger前端纯js单元格合并

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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>js行列合并</title>
    <script language="javascript" type="text/javascript" src="jquery.js"></script>
    <script language="javascript" type="text/javascript">
        $(function () {
            $("#btClick1").click(function () {
                MergerTable("GridView1");
            });
            $("#btClick2").click(function () {
                MergerTableOther("GridView1");
            });
        });

        function MergerTable(tableID) {
            var tabI = "#" + tableID;
            var rows = $(tabI).find("tr").length - 1; // 去掉表头
            var cols = $(tabI).find("tr").eq(1).find("td").length;

            var cell1Group;
            var cell2Group;
            var group1ID;
            var group2ID;
            // 按列合并
            for (var i = 0; i < cols; i++) {
                cell1Group = $(tabI).find("tr").eq(1).find("td").eq(i);
                group1ID = $(cell1Group).find("[group]").attr("group");
                for (var j = 1; j < rows; j++) {
                    cell2Group = $(tabI).find("tr").eq(j + 1).find("td").eq(i);
                    group2ID = $(cell2Group).find("[group]").attr("group");
                    if (group1ID != null && group2ID != null && group1ID != undefined
                    && group2ID != undefined && group2ID == group1ID) {
                        var rowspanOld = $(cell1Group).attr("rowspan");
                        $(cell1Group).attr("rowspan", rowspanOld + 1);
                        $(cell2Group).attr("J_del", "del");
                    } else {
                        cell1Group = cell2Group;
                        group1ID = group2ID;
                    }
                }
            }
            $(tabI).find("td[J_del='del']").remove();
        }
        function MergerTableOther(tb) {
            tb = "#" + tb;
            var i = 0;
            var j = 0;
            var rowCount = $(tb).find("tr").length - 1;
            var colCount = $(tb).find("tr").eq(1).find("td").length;
            var obj1 = null;
            var obj2 = null;
            for (i = 0; i < rowCount; i++) {
                for (j = 0; j < colCount; j++) {
                    $(tb).find("tr").eq(i + 1).find("td").eq(j).attr("id", "tb__" + (i + 1).toString() + "_" + j.toString());
                }
            }
            // 逐列检查合并
            for (i = 0; i < colCount; i++) {
                obj1 = $("#tb__1_" + i.toString());
                for (j = 1; j < rowCount; j++) {
                    obj2 = $("#tb__" + (j + 1).toString() + "_" + i.toString());

                    if ($(obj1).find("[group]").attr("group") == $(obj2).find("[group]").attr("group")
						&& $(obj1).find("[group]").attr("group") != undefined
                        && $(obj2).find("[group]").attr("group") != undefined) {

                        $(obj1).attr("rowspan", $(obj1).attr("rowspan") + 1);
                        $(obj2).remove();

                    } else {
                        obj1 = $("#tb__" + (j + 1).toString() + "_" + i.toString());
                    }
                }
            }
        }
    </script>
</head>
<body>
    <div style="text-align: center; margin: 10px;">
        <table cellspacing="0" cellpadding="0" border="1" id="GridView1" align="center">
            <tr align="center">
                <th scope="col">
                    部门名称
                </th>
                <th scope="col">
                    职务
                </th>
                <th scope="col">
                    部门名称
                </th>
                <th scope="col">
                    用户名称
                </th>
            </tr>
            <tr>
                <td>
                    <span group="00f52096-9552-4ebb-a40e-be7f173dbc5d">微软技术中心开发服务部</span>
                </td>
                <td>
                    <span group="00f52096-9552-4ebb-a40e-be7f173dbc5d软件工程师">软件工程师</span>
                </td>
                <td>
                    微软技术中心开发服务部
                </td>
                <td>
                    冉德胜
                </td>
            </tr>
            <tr>
                <td>
                    <span group="00f52096-9552-4ebb-a40e-be7f173dbc5d">微软技术中心开发服务部</span>
                </td>
                <td>
                    <span group="00f52096-9552-4ebb-a40e-be7f173dbc5d软件工程师">软件工程师</span>
                </td>
                <td>
                    微软技术中心开发服务部
                </td>
                <td>
                    张业
                </td>
            </tr>
            <tr>
                <td>
                    <span group="00f52096-9552-4ebb-a40e-be7f173dbc5d">微软技术中心开发服务部</span>
                </td>
                <td>
                    <span group="00f52096-9552-4ebb-a40e-be7f173dbc5d软件工程师">软件工程师</span>
                </td>
                <td>
                    微软技术中心开发服务部
                </td>
                <td>
                    曹骞
                </td>
            </tr>
            <tr>
                <td>
                    <span group="00f52096-9552-4ebb-a40e-be7f173dbc5d">微软技术中心开发服务部</span>
                </td>
                <td>
                    <span group="00f52096-9552-4ebb-a40e-be7f173dbc5d软件工程师">软件工程师</span>
                </td>
                <td>
                    微软技术中心开发服务部
                </td>
                <td>
                    李跃辉
                </td>
            </tr>
            <tr>
                <td>
                    <span group="00f52096-9552-4ebb-a40e-be7f173dbc5d">微软技术中心开发服务部</span>
                </td>
                <td>
                    <span group="00f52096-9552-4ebb-a40e-be7f173dbc5d软件工程师">软件工程师</span>
                </td>
                <td>
                    微软技术中心开发服务部
                </td>
                <td>
                    柯瑞发
                </td>
            </tr>
            <tr>
                <td>
                    <span group="00f52096-9552-4ebb-a40e-be7f173dbc5d">微软技术中心开发服务部</span>
                </td>
                <td>
                    <span group="00f52096-9552-4ebb-a40e-be7f173dbc5d项目经理">项目经理</span>
                </td>
                <td>
                    微软技术中心开发服务部
                </td>
                <td>
                    涂志峰
                </td>
            </tr>
            <tr>
                <td>
                    <span group="00f52096-9552-4ebb-a40e-be7f173dbc5d">微软技术中心开发服务部</span>
                </td>
                <td>
                    <span group="00f52096-9552-4ebb-a40e-be7f173dbc5d高级软件工程师">高级软件工程师</span>
                </td>
                <td>
                    微软技术中心开发服务部
                </td>
                <td>
                    王磊
                </td>
            </tr>
            <tr>
                <td>
                    <span group="00f52096-9552-4ebb-a40e-be7f173dbc5d">微软技术中心开发服务部</span>
                </td>
                <td>
                    <span group="00f52096-9552-4ebb-a40e-be7f173dbc5d软件工程师">软件工程师</span>
                </td>
                <td>
                    微软技术中心开发服务部
                </td>
                <td>
                    盛光怀
                </td>
            </tr>
            <tr>
                <td>
                    <span group="00f52096-9552-4ebb-a40e-be7f173dbc5d">微软技术中心开发服务部</span>
                </td>
                <td>
                    <span group="00f52096-9552-4ebb-a40e-be7f173dbc5d软件工程师">软件工程师</span>
                </td>
                <td>
                    微软技术中心开发服务部
                </td>
                <td>
                    肖冠凡
                </td>
            </tr>
            <tr>
                <td>
                    <span group="00f52096-9552-4ebb-a40e-be7f173dbc5d">微软技术中心开发服务部</span>
                </td>
                <td>
                    <span group="00f52096-9552-4ebb-a40e-be7f173dbc5d软件工程师">软件工程师</span>
                </td>
                <td>
                    微软技术中心开发服务部
                </td>
                <td>
                    邓汉武
                </td>
            </tr>
        </table>
    </div>
    <div style="text-align: center">
        <input type="button" value="合并表格1" id="btClick1">
    </div>
    <div style="text-align: center">
        <input type="button" value="合并表格2" id="btClick2">
    </div>
</body>
</html>

js 下载 

/*!
 * jQuery JavaScript Library v1.4.2
 * http://jquery.com/
 *
 * Copyright 2010, John Resig
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * Includes Sizzle.js
 * http://sizzlejs.com/
 * Copyright 2010, The Dojo Foundation
 * Released under the MIT, BSD, and GPL Licenses.
 *
 * Date: Sat Feb 13 22:33:48 2010 -0500
 */

结果演示

Jack_software
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
java js合并_JS合并单元格
weixin_32791013的博客
02-19 403
在Web中经常需要合并单元格，例如对于下面一个表格:table,table tr th,table tr td {border: 1px solid #0094ff;}表头1表头2表头3表头4列1列2列3列4列1列2列3列4列1列2列3列4表格原来样式:合并的JS方法:(可以作为一个工具方法)1、纵向合并，也就是对同一列的相邻行单元格相同的进行合并/*** 合并单元格(如果结束行传0代表合并所有行...
el-table合并列 合并单元格
09-03
el-element中el-table合并单元格 合并列。无限制列合并。通过循环数据源数据获取该列需要合并的行数。
js创建对象
mengyun00的专栏
02-27 726
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 无标题文档     //通过 new Object() 空白的对象   //var obj=new Object();    //定义空白类   function Test(){
layui表格合并
Jasmyn飞飞飞的博客
03-17 1087
遇到一个需求，layui合并表格，发现同事在一个项目里有写，就lou一下，做个记录，哈哈哈哈 先看效果： 实现方法如下 一、自定义一个modul，用来合并表格，然后对需要合并的列，加个merge属性，设置为true // 自定义模块 layui.config({ base: 'module/' }).extend({ tableMerge: 'tableMerge'...
html表格合并插件,freeTable-自由编辑表格的js插件设计笔记1-实现单元格合并
weixin_39715538的博客
06-21 523
本人试图构造一个可以自由编辑的表格。所谓的自由编辑，就是像在excel编辑表格那么容易，可以新增、删去行或列，可以自由合并单元格。首先，想先完成第一步：合并单元格。1.Table基本操作在实现之前，先要了解js对表格的基本操作，在这里主要需要用到的方法是insertRow和insertCell，很容易理解，就是插入行或单元格。insertRow(n)表示在第n行(前)插入行，即插入之后它就是第n行...
JS自动合并表格
langzhiwang888的专栏
01-15 249
js合并单元格.html Html代码   &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;   &lt;html xmlns="http://www.w3.org/19...
table-rowspan表格自动合并单元格插件
11-07
对table表格进行操作，两行根据点击添加 删除按钮 进行单元格的删除 添加 合并单元格。
sTable:一个简易的Table组件-支持子表、单元格合并、链式调用、事件代理、简易排序等功能
06-13
sTable ====== 一个简易的Table组件-支持子表、单元格合并、链式调用、事件代理、简易排序等功能。 演示地址： GitHub Pages:
vue-easytable合并单元格
05-18
vue-easytable合并单元格，文档包括ftl文件及对应的js
bootstrap-table导出合并单元格
08-31
使用bootstrap-table客户端分页生成表格，导出表格按照单元格内容相同合并单元格
表格行列合并JS
01-09
//函数说明：合并指定表格（表格id为_w_table_id）指定列（列数为_w_table_colnum）的相同文本的相邻单元格 //参数说明：_w_table_id 为需要进行合并单元格的表格的id。如在HTMl中指定表格 id="data" ，此参数应为 #data //参数说明：_w_table_colnum 为需要合并单元格的所在列。为数字，从最左边第一列为1开始算起。 //函数说明：合并指定表格（表格id为_w_table_id）指定行（行数为_w_table_rownum）的相同文本的相邻单元格 //参数说明：_w_table_id 为需要进行合并单元格的表格id。如在HTMl中指定表格 id="data" ，此参数应为 #data //参数说明：_w_table_rownum 为需要合并单元格的所在行。其参数形式请参考jQuery中nth-child的参数。 // 如果为数字，则从最左边第一行为1开始算起。 // "even" 表示偶数行 // "odd" 表示奇数行 // "3n+1" 表示的行数为1、4、7、10....... //参数说明：_w_table_maxcolnum 为指定行中单元格对应的最大列数，列数大于这个数值的单元格将不进行比较合并。 // 此参数可以为空，为空则指定行的所有单元格要进行比较合并。
表格单元格合并js
08-24
前台页面table合并单元格，可以指定合并但愿格的列数。 _w_table_lefttitle_rowspan("#evalAspectTable",1,1); 函数说明：合并指定表格（表格id为_w_table_id）指定列 （行数大于_w_table_mincolnum 小于_w_table_maxcolnum）相同列中的相同文本的相邻单元格 多于一列时，后一列的单元格合并范围不能超过前一列的合并范围。避免出现交错。 参数说明：_w_table_id 为需要进行合并单元格的表格id。如在HTMl中指定表格 id="data" ，此参数应为 #data 参数说明：_w_table_mincolnum 为需要进行比较合并的起始列数。为数字，则从最左边第一行为1开始算起。 此参数可以为空，为空则第一列为起始列。需要注意，如果第一列为序号列，则需要排除此列。 参数说明：_w_table_maxcolnum 为需要进行比较合并的最大列数，列数大于这个数值的单元格将不进行比较合并。 为数字，从最左边第一列为1开始算起。此参数可以为空，为空则同_w_table_mincolnum
js合并单元格 相同内容的单元格合并
02-08
demo实例 合并紧挨着的 单元格 通过js实现 希望对大家有帮助
单元格合并插件tablesMergeCell.js
06-01
jquery表格单元格合并
JavaScript合并单元格【解决只能根据单列进行合并的问题】
leader_li的博客
03-09 1134
该合并单元格的方法无法整齐的规划表格。由于每列只能根据该列的重复值进行合并，看着比较混乱。需要根据其他列进行分割合并。
js 实现表格合并单元格
qq_35469137的博客
04-15 2851
需求 实现下面的表格效果 代码： //利用去重原理 function table(dom) { var arr = []; var f= document.getElementsByClassName(dom); for (let i = 0; i < f.length; i++) { if (arr.indexOf(f[i].innerHTML) == -1) { arr.push(f[i].innerHTML); var.
html:table属性以及html简单合并单元格应用
YangLu888
10-03 3770
html合并单元格的简单应用以及html的table属性
bWAPP——CSRF
weixin_41182861的博客
08-29 1086
一、CSRF (Change Password) 1.1、Low 本场景，通过GET请求方式修改密码, 并且验证仅验证两次输入的新密码是否相同： 面对本场景的攻击：攻击者将在自己的站点上构造恶意页面，并引诱被攻击者访问恶意页面的链接，即可达到攻击目的。 恶意页面源码： //1.链接利用(a标签) <a href="http://192.168.83.129:10001/csrf_1.php?password_new=hack&password_conf=hack&action=
JS合并表格中内容一样的单元格
sun_ting_chuan的博客
11-22 2389
1.页面效果 2.js代码 function mergeCells() { var colNumber = tablecontent.rows.item(0).cells.length; //获取表格列数 var rowNumber = tablecontent.rows.length; //获取表格行数 var idStr = ""; //遍历表格中除去表头和第一列中其他的单元格 ...
react-bootstrap-table-next怎么动态合并单元格
最新发布
05-31
您，${username}！</h1> <p><a href="UserServlet?action=logout">退出登录</a></p要动态合并单元格，需要在渲染表格之前对表格数据进行处理，合并需要合并> </body> </html> ``` 6. 配置web.xml文件 在`web.xml`文件中配置Servlet和JSP的行或列，并将处理后的数据传递给 `react-bootstrap-table-next` 组件进行渲染。 下面是一个例页面的映射关系： ```xml <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="子，演示如何在渲染表格之前动态合并单元格： ```javascript import BootstrapTable from 'http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" react-bootstrap-table-next'; import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css'; function mergeCells(data, mergeColumns) { xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web // 处理需要合并的列 const merged = []; let i = 0; while (i < data.length)-app_4_0.xsd" version="4.0"> <servlet> <servlet-name>UserServlet</s { const row = data[i]; let j = i + 1; while (j < data.length && mergeColumns.every((ervlet-name> <servlet-class>com.example.servlet.UserServlet</servlet-class> </servlet> <servlet-mcol) => data[j][col] === row[col])) { j++; } if (j - i > 1) { apping> <servlet-name>UserServlet</servlet-name> <url-pattern>/UserServlet</url-pattern> </servlet // 合并需要合并的行或列 const mergedRow = { ...row }; mergeColumns.forEach((col) =>-mapping> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> </web mergedRow[col] = { value: row[col], rowSpan: j - i }); merged.push(mergedRow); } else { -app> ``` 7. 运行项目 将项目部署到Tomcat服务器上，启动服务器后在浏览器中 // 不需要合并的行或列 merged.push(row); } i = j; } return merged; 访问`http://localhost:8080/`即可进入主页，点击“立即开始”按钮进入登录页面} const data = [ { id: 1, name: 'John', age: 30, gender: '，输入正确的用户名和密码后，进入欢迎页面，点击“退出登录”按钮即可注销用户。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Jack_software

感谢打赏，我努力提供优质内容~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值