Javascript合并表格相同内容单元格示例

最新推荐文章于 2024-08-30 11:21:23 发布
最新推荐文章于 2024-08-30 11:21:23 发布
阅读量8.3k 收藏 12
点赞数 4
分类专栏： Javascript资料 文章标签： JavaScript 合并 表格
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/apollokk/article/details/9890751
版权

效果图:

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>表格相同内容合并</title>
</head>
 
<body>
合并前：
<table width="400" border="1">
  <tr>
    <td>a</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
  </tr>
  <tr>
    <td>a</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>6</td>
  </tr>
  <tr>
    <td>a</td>
    <td>2</td>
    <td>3</td>
    <td>3</td>
    <td>4</td>
    <td> </td>
  </tr>
  <tr>
    <td>b</td>
    <td>3</td>
    <td>4</td>
    <td>6</td>
    <td>7</td>
    <td> </td>
  </tr>
  <tr>
    <td>b</td>
    <td>3</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td> </td>
  </tr>
  <tr>
    <td>cc</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td> </td>
  </tr>
  <tr>
    <td>cc</td>
    <td>2</td>
    <td>3</td>
    <td>5</td>
    <td>5</td>
    <td> </td>
  </tr>
  <tr>
    <td>d</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td> </td>
  </tr>
  <tr>
    <td>e</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td> </td>
  </tr>
</table><br />
合并后：<br />
<table width="400" border="1" id="table1">
  <tr>
    <td>a</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
  </tr>
  <tr>
    <td>a</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>6</td>
  </tr>
  <tr>
    <td>a</td>
    <td>2</td>
    <td>3</td>
    <td>3</td>
    <td>4</td>
    <td> </td>
  </tr>
  <tr>
    <td>b</td>
    <td>3</td>
    <td>4</td>
    <td>6</td>
    <td>7</td>
    <td> </td>
  </tr>
  <tr>
    <td>b</td>
    <td>3</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td> </td>
  </tr>
  <tr>
    <td>cc</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td> </td>
  </tr>
  <tr>
    <td>cc</td>
    <td>2</td>
    <td>3</td>
    <td>5</td>
    <td>5</td>
    <td> </td>
  </tr>
  <tr>
    <td>d</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td> </td>
  </tr>
  <tr>
    <td>e</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td> </td>
  </tr>
</table>
</body>
</html>


 

JS:

///合并表格相同行的内容
///table：表格或者表格ID（最好是tbody，避免把表尾给合并了)
///startRow：起始行，没有标题就从0开始
///endRow：终止行，此参数是递归时检查的范围，一开始时会自动赋值为最后一行
///col：当前处理的列
///endCol:终止列
///isInit:是否初始调用，如果是则在终止行为0时自动取最后一行
function MergeCell(table, startRow, endRow, col, endCol, isInit) {
    if (typeof (table) == 'string')
        table = document.getElementById(table);
    if (col >= table.rows[0].cells.length || col > endCol) {
        return;
    }
    if (isInit == undefined) isInit = true;
    //当检查第0列时检查所有行
    if ((col == 0 || endRow == 0) && isInit) {
        endRow = table.rows.length - 1;
    }
    for (var i = startRow; i < endRow; i++) {
        //程序是自左向右合并
        if (table.rows[startRow].cells[col].innerHTML == table.rows[i + 1].cells[col].innerHTML) {
            //如果相同则隐藏下一行的同列单元格
            table.rows[i + 1].cells[col].style.display = 'none';
            //更新rowSpan属性
            table.rows[startRow].cells[col].rowSpan = (table.rows[startRow].cells[col].rowSpan | 0) + 1;
            //当循环到终止行前一行并且起始行和终止行不相同时递归(因为上面的代码已经检查了i+1行，所以此处只到endRow-1)
            if (i == endRow - 1 && startRow != endRow) {
                MergeCell(table, startRow, endRow, col + 1, endCol, false);
            }
        } else {
            //起始行，终止行不变，检查下一列
            MergeCell(table, startRow, i, col + 1, endCol, false);
            //增加起始行
            startRow = i + 1;
        }
    }
}

 

 

js合并内容相同的单元格
qianhe_he的专栏
03-12 6164
function MergeDateCells(tab) {  //从第二行开始，排除标题行  var startRow = 1;  //循环记录表格中td的内容,用来判断td中的value是否发生了改变  var tdTempV = "";  //如果td的值相同,那么变量加1, 否则将临时变量加入集合中  var rowCount = 1;  //得到相同内容的行数的集合www.
JS TABLE CELL 相同内容 单元格 合并
11-14
Table前端同一列里面内容相同的单元格合并，网上找的存在如下问题： 1、大部分只能合并某一列，不能多列； 2、有些能合并多列的，首列合并后，第二列合并单元格行数不能超过首列合并的单元格行数，虽然第二列值可能相同的行数更多。例如： 首列 第二列 a b c b c b 总之很不满意，花了一晚上时间写了一下，希望能解决大部分类似问题。
js合并同列单元格相同内容
wilL-my的博客
03-12 561
function tableMergeCell(col) { //col可指定列 let tdContent = [] let numbers = 1 let indexs = 0 $('tbody tr').each(function (index, item) { //记入第一行数据 ...
Avue.js 表格动态合并单元格（合并纵向单元格）
最新发布
D47255的博客
08-30 413
avue-crud动态合并纵向单元格
js实现table合并相同列单元格
weixin_30794499的博客
03-30 374
/** * Created with JetBrains WebStorm. * User: Johnny * Date: 18-3-26 * Time: 下午4:48 * Table td 相同值合并行 要求： * 1.table 必须包含tbody，tbody为数据主休 * 2.table 添加 id="kbdatas" * 调用说明: * $(function(){ * ...
Javascript学习笔记part1(Table单元格相同数据自动合并)
FeverDestiny
05-25 3106
欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦： Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和图片上传 LaTex数学公式 UML序列图和流程图 离线写博客 导入导出Markdown文件 丰富的快捷键 快捷键 加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl
js控制table单元格 行 列 相同内容合并
上海小宋的博客
09-03 1386
<!DOCTYPE> <HTML> <HEAD> <style> </style> </HEAD> <BODY> <TABLE border="1"> <thead id="tb" οnclick="findcell()"> <TR> ...
Javascript合并表格中具有相同内容单元格示例
10-27
综上所述，通过JavaScript合并表格中具有相同内容的单元格，可以有效地简化表格结构，提高信息展示的效率和美观度。在实现时，需要综合运用HTML、CSS和JavaScript的知识，特别注意DOM操作和属性设置的准确性，以确保...
JQuery实现表格中相同单元格合并示例代码
10-27
### JQuery实现表格中相同单元格合并示例代码知识点 #### 一、JQuery与表格单元格合并的基本概念 JQuery是一个快速、小巧、功能丰富的JavaScript库，它简化了HTML文档遍历和事件处理、DOM操作、动画和Ajax交互等...
jquery 合并内容相同的单元格(示例代码)
10-26
本篇文章将详细介绍如何使用 jQuery 合并内容相同的单元格，并提供一个示例代码。 合并内容相同的单元格的基本思路是遍历表格的每一行，比较同一列中的相邻单元格内容。如果内容相同，则将第一个单元格的 `rowspan`...
JS 实现Table相同行的单元格自动合并示例代码
10-26
在HTML文档中使用JavaScript来自动合并表格中相同行的单元格是一种常见的前端开发技术。这种技术可以提高页面的可读性，尤其是在处理具有相同值的重复数据时。上述代码示例提供了一种简单而有效的方法来实现这一功能...
table表格按列合并相同数据行单元格代码
07-13
在jsp、html页面中实现table表格按列合并相同数据行单元格代码，可实现功能为：在一个table表格中，合并指定列中所有相同数据相邻行单元格内容。
table自动合并相同值得单元格的例子
10-26
一个简单的自动合并相同值单元格的例子，简单易懂
利用js合并table相同内容单元格并js方式自动生成
11-15
利用js合并table相同内容单元格并js方式自动生成，把文本内容复制进js中，应该就知道大概咋用了
table合并
木昆灵寒酥的博客
12-11 868
一下表格基于element-ui的table进行举栗子。
【Excel】快速让一列中相同内容的单元格合并
闲时不要多想
11-17 8866
达到以下效果 步骤： 选中需要合并单元格的列，依次点击 【数据】—【分类汇总】—【确定】 从A2单元格向下选中所有单元格（A1不用选），Ctrl+G，定位条件选择【空值】，之后点击【合并后居中】； 依次点击 【数据】—【分类汇总】—【全部删除】； 选中A列合并单元格，利用格式刷功能将B列相同内容合并单元格展示。
element table 如何根据数据相同合并单元格
qq_41732757的博客
07-03 306
1.在html代码上加上:span-method=“mergeSameRows”2.在js里面直接贴代码。
JS处理table表格根据某列判断重复合并单元格
qq_39534956的博客
05-10 651
原表格： 合并后： 在做合并表格前要先搞懂合并的原理，推荐阅读： 〖大前端 - 基础入门三大核心之 html 篇⑯〗- 认识表格 与 合并单元格 table数据为list一维数组，获取当前列存在重复的数量，且判断是否为第一条数据，若为第一条重复数据则加上rowspan，否则判断重复的数量是否为1才展示，具体代码如下：HTML： JS： data数据：
HTML相同值的行数据项进行单元格合并
hellolater的博客
10-25 1361
【代码】HTML相同值的行数据项进行单元格合并。
JavaScript动态修改与合并表格单元格示例
本文提供的实例详细讲解了如何使用JavaScript来动态修改表格内容以及合并单元格。下面将深入探讨这些方法。 首先，创建一个HTML表格通常涉及到定义`<table>`、`<tr>`（表格行）、`<td>`（表格数据单元格）等元素。...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Hello World,

你的鼓励将是我创作的最大动力

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

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

打赏作者

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

抵扣说明：

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

余额充值