html td 的横向与纵向合并,【Javascript】Javascript横向/纵向合并单元格TD

最新推荐文章于 2024-06-06 16:50:10 发布
转载 最新推荐文章于 2024-06-06 16:50:10 发布 · 892 阅读 · 0
文章标签：

#html td 的横向与纵向合并

本文讨论了在报表系统中如何通过HTML和JavaScript处理TD单元格的合并，以提高数据展示的清晰度。作者分享了两种方法，一种是在编写HTML时设置单元格合并，另一种是后期使用JavaScript完成合并。文中指出，早期的JavaScript合并方法存在错误，可能导致已合并单元格的处理问题。随后，作者提供了两个改进的方法，分别用于合并相同文本的单元格和按序号合并单元格，并给出了示例代码和应用实例。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

> 需求是这样滴(>_

在报表系统中，涉及“HTML的TD单元格的合并”恐怕为数不少。

比如，从DB查得数据并经过后台的整理后，可能是这样的：

Table1

JOBTOTAL SALINDEXEMPNOENAMEJOBMGRHIREDATESALCOMMDEPTNO

1

ANALYST

6000

1

7788

SCOTT

ANALYST

7566

4/19/1987

3000.00

20

1

ANALYST

6000

2

7902

FORD

ANALYST

7566

12/3/1981

3000.00

20

2

CLERK

4150

3

7934

MILLER

CLERK

7782

1/23/1982

1300.00

10

2

CLERK

4150

4

7900

JAMES

CLERK

7698

12/3/1981

950.00

30

2

CLERK

4150

5

7369

SMITH

CLERK

7902

12/17/1980

800.00

20

2

CLERK

4150

6

7876

ADAMS

CLERK

7788

5/23/1987

1100.00

20

3

MANAGER

8275

7

7698

BLAKE

MANAGER

7839

5/1/1981

2850.00

30

3

MANAGER

8275

8

7566

JONES

MANAGER

7839

4/2/1981

2975.00

20

3

MANAGER

8275

9

7782

CLARK

MANAGER

7839

6/9/1981

2450.00

10

4

PRESIDENT

5000

10

7839

KING

PRESIDENT

11/17/1981

5000.00

10

5

SALESMAN

5600

11

7844

TURNER

SALESMAN

7698

9/8/1981

1500.00

0.00

30

5

SALESMAN

5600

12

7654

MARTIN

SALESMAN

7698

9/28/1981

1250.00

1400.00

30

5

SALESMAN

5600

13

7521

WARD

SALESMAN

7698

2/22/1981

1250.00

500.00

30

5

SALESMAN

5600

14

7499

ALLEN

SALESMAN

7698

2/20/1981

1600.00

300.00

30

为了让用户更清晰地查看报表，结果可能需要是这样的(各职位的薪水总额及分布明细)：

Table2

JOBTOTAL SALINDEXEMPNOENAMEJOBMGRHIREDATESALCOMMDEPTNO

1

ANALYST

6000

1

7788

SCOTT

ANALYST

7566

4/19/1987

3000.00

20

2

7902

FORD

ANALYST

7566

12/3/1981

3000.00

20

2

CLERK

4150

3

7934

MILLER

CLERK

7782

1/23/1982

1300.00

10

4

7900

JAMES

CLERK

7698

12/3/1981

950.00

30

5

7369

SMITH

CLERK

7902

12/17/1980

800.00

20

6

7876

ADAMS

CLERK

7788

5/23/1987

1100.00

20

3

MANAGER

8275

7

7698

BLAKE

MANAGER

7839

5/1/1981

2850.00

30

8

7566

JONES

MANAGER

7839

4/2/1981

2975.00

20

9

7782

CLARK

MANAGER

7839

6/9/1981

2450.00

10

4

PRESIDENT

5000

10

7839

KING

PRESIDENT

11/17/1981

5000.00

10

5

SALESMAN

5600

11

7844

TURNER

SALESMAN

7698

9/8/1981

1500.00

0.00

30

12

7654

MARTIN

SALESMAN

7698

9/28/1981

1250.00

1400.00

30

13

7521

WARD

SALESMAN

7698

2/22/1981

1250.00

500.00

30

14

7499

ALLEN

SALESMAN

7698

2/20/1981

1600.00

300.00

30

这就需要我们对单元格进行相应的合并。

一般来说，有两种处理方法，

在编写HTML时已设置单元格的合并；

在编写HTML时未作合并处理，后期由Javascript完成单元格合并工作。

本文讲的是第2种情况。

合并单元格的步骤

比如，我要把上表Table1中数值为ANALYST的两个单元格合并。

JOB

ANALYST

ANALYST

我们首先需要将第二个ANALYST的单元格删除掉

然后设置第一个ANALYST的单元格的rowSpan属性为2(表示“跨越2行”)

> 写得不好的公用方法

之前写了一个公用Javascript方法，用以合并相邻间文本相同的单元格。

这个方法写得不好，有明显的Bug。对已做过合并的Table，这个方法有可能导致合并单元格错误。

主要的原因在于，对于合并过单元格的表格，那么被合并的行就会相应的少一个TD，而此方法依旧按未合并过单元格的情况来获取TD对象。

比如，获取第二列的所有单元格，此程序用“获取全部TR中的第二个TD”来实现，这在未合并过单元格的Table是正确的，但对于合并过单元格的Table，则未必，因为被合并的行相应地少一个单元格。

此处将代码贴出，希望大家引以为鉴。

8f900a89c6347c561fdf2122f13be562.png

961ddebeb323a10fe0623af514929fc1.png

functionmergeCell(tableObj, col) {var $tab =$(tableObj);var $trs = $tab.find("tr");varoldval;varfirstTD;var counter = 0;

$trs.each(function(index) {if (!oldval && !firstTD) {

oldval= $(this).find("td:eq(" + col + ")").text();

firstTD= $(this).find("td:eq(" + col + ")").get(0);

counter= 0;

counter++;

}else{if ($(this).find("td:eq(" + col + ")").text() ==oldval) {

$(this).find("td:eq(" + col + ")").remove();

counter++;

}else{

$(firstTD).attr("rowSpan", counter);

oldval= $(this).find("td:eq(" + col + ")").text();

firstTD= $(this).find("td:eq(" + col + ")").get(0);

counter= 0;

counter++;

}

}if (index >= $trs.length - 1) {

$(firstTD).attr("rowSpan", counter);

}

});

}

mergeCell

页面DEMO如下(HTML代码，较长)：

8f900a89c6347c561fdf2122f13be562.png

961ddebeb323a10fe0623af514929fc1.png

Insert title here

$().ready(function() {

mergeCell($("#list_table").get(0),1);

mergeCell($("#list_table").get(0),2);

});functionmergeCell(tableObj, col) {var$tab=$(tableObj);var$trs=$tab.find("tr");varoldval;varfirstTD;varcounter= 0;

$trs.each(function(index) {if(!oldval&& !firstTD) {

oldval=$(this).find("td:eq(" +col+ ")").text();

firstTD=$(this).find("td:eq(" +col+ ")").get(0);

counter= 0;

counter++;

}else{if($(this).find("td:eq(" +col+ ")").text()==oldval) {

$(this).find("td:eq(" +col+ ")").remove();

counter++;

}else{

$(firstTD).attr("rowSpan", counter);

oldval=$(this).find("td:eq(" +col+ ")").text();

firstTD=$(this).find("td:eq(" +col+ ")").get(0);

counter= 0;

counter++;

}

}if(index>=$trs.length- 1) {

$(firstTD).attr("rowSpan", counter);

}

});

}

   JOBTOTAL SALINDEXEMPNOENAMEJOBMGRHIREDATESALCOMMDEPTNO1ANALYST600017788SCOTTANALYST75664/19/19873000.00 201ANALYST600027902FORDANALYST756612/3/19813000.00 202CLERK415037934MILLERCLERK77821/23/19821300.00 102CLERK415047900JAMESCLERK769812/3/1981950.00 302CLERK415057369SMITHCLERK790212/17/1980800.00 202CLERK415067876ADAMSCLERK77885/23/19871100.00 203MANAGER827577698BLAKEMANAGER78395/1/19812850.00 303MANAGER827587566JONESMANAGER78394/2/19812975.00 203MANAGER827597782CLARKMANAGER78396/9/19812450.00 104PRESIDENT5000107839KINGPRESIDENT 11/17/19815000.00 104SUPER PRESIDENT5000107839KINGPRESIDENT 11/17/19815000.00 105SALESMAN5600117844TURNERSALESMAN76989/8/19811500.000.00305SALESMAN5600127654MARTINSALESMAN76989/28/19811250.001400.00305SALESMAN5600137521WARDSALESMAN76982/22/19811250.00500.00305SALESMAN5600147499ALLENSALESMAN76982/20/19811600.00300.0030

WrongMergeTD.html

> 写得不好怎么办？卷土重来呗

于是，重新写了两个公用方法来合并单元格。

一个是合并相邻值相同的单元格；

另外一个是合并指定序号的单元格，比如2-5,6-8，是“合并第2个至第5个单元格、第6个和至第8个单元格”。

这俩方法将“获取需要合并的TD元素”的动作交由方法调用者，只负责对入参单元格作对应的合并。

JS

8f900a89c6347c561fdf2122f13be562.png

961ddebeb323a10fe0623af514929fc1.png

/**

* Meger cells with same text

* @param $tds TDs jquery object

* @param type row/col*/

functionmergeCell4SameText($tds, type) {varoldval;varfirstTD;var counter = 0;

$tds.each(function(index) {if (index == 0) {

oldval= $(this).text();

firstTD= $(this).get(0);

counter= 0;

counter++;

}else{if ($(this).text() ==oldval) {

$(this).remove();

counter++;

}else{if (type == 'col') {

$(firstTD).attr("rowSpan", counter);

}else if (type == 'row') {

$(firstTD).attr("colSpan", counter);

}

oldval= $(this).text();

firstTD= $(this).get(0);

counter= 0;

counter++;

}

}if (index >= $tds.length - 1) {if (type == 'col') {

$(firstTD).attr("rowSpan", counter);

}else if (type == 'row') {

$(firstTD).attr("colSpan", counter);

}

}

});

}/**

* Meger cells by the parameters "index"

* @param $tds TDs jquery object

* @param type row/col

* @param index for example, 0-1,2-5,6-8,10-13*/

functionmergeCellByIndex($tds, type, index) {var indexArrs = index.split(',');varfromTo;varfrom;varto;for (var i inindexArrs) {

fromTo=indexArrs[i];

from= new Number(fromTo.split('-')[0]);

to= new Number(fromTo.split('-')[1]);for (var j = 1 + from; j <= to; j++) {

$($tds.get(j)).remove();

}if (type == 'col') {

$($tds.get(from)).attr("rowSpan", to - from + 1);

}else if (type == 'row') {

$($tds.get(from)).attr("colSpan", to - from + 1);

}

}

}

tdmerger

调用的页面(HTML代码，较长)：

8f900a89c6347c561fdf2122f13be562.png

961ddebeb323a10fe0623af514929fc1.png

Insert title here

$().ready(function() {

$col1tds=$("table tr td:nth-child(1)");

$col2tds=$("table tr td:nth-child(2)");

$col3tds=$("table tr td:nth-child(3)");

mergeCellByIndex($col1tds,'col','0-1,2-5,6-8,10-13');

mergeCellByIndex($col2tds,'col','0-1,2-5,6-8,10-13');

mergeCellByIndex($col3tds,'col','0-1,2-5,6-8,10-13');/*$row2tds = $("table tr:eq(2) td");

mergeCellByIndex($row2tds, 'row', '6-11');*/});

   JOBTOTAL SALINDEXEMPNOENAMEJOBMGRHIREDATESALCOMMDEPTNO1ANALYST600017788SCOTTANALYST75664/19/19873000.00 201ANALYST600027902FORDANALYST756612/3/19813000.00 202CLERK415037934MILLERCLERK77821/23/19821300.00 102CLERK415047900JAMESCLERK769812/3/1981950.00 302CLERK415057369SMITHCLERK790212/17/1980800.00 202CLERK415067876ADAMSCLERK77885/23/19871100.00 203MANAGER827577698BLAKEMANAGER78395/1/19812850.00 303MANAGER827587566JONESMANAGER78394/2/19812975.00 203MANAGER827597782CLARKMANAGER78396/9/19812450.00 104PRESIDENT5000107839KINGPRESIDENT 11/17/19815000.00 105SALESMAN5600117844TURNERSALESMAN76989/8/19811500.000.00305SALESMAN5600127654MARTINSALESMAN76989/28/19811250.001400.00305SALESMAN5600137521WARDSALESMAN76982/22/19811250.00500.00305SALESMAN5600147499ALLENSALESMAN76982/20/19811600.00300.0030

mergeTD

对于合并单元格，这两种方式都不太满意，可是，也想不到更好的方法对此操作作封装。

如果童靴有更好的方法，请指点！！

杨真直
关注
html语言的td合并,table标签合并单元格（包括行和列的合并）的方法
weixin_39671631的博客
05-31 2万+
刘代码已经在table标签的使用方法中介绍过该标签的一些具体用法，但这次，我们要讲解的是如何合并table表格中的单元格，包括行的合并以及列的合并方法table表格单元格的合并，主要分为两种：跨行合并单元格和跨列合并单元格。下面分别介绍这两种合并方法：第一种：跨行合并单元格，使用rowspan属性。跨行合并的单元格，可分为表头单元格跨行合并和标准单元格跨行合并两种。1、表头单元格的跨行合并想要合并...
07-HTML-表格标签（合并单元格）
记录java学习日常~
05-12 1196
规定表格相对周围元素的对齐方式。规定表格的背景颜色。
html td 的横向与纵向合并
热门推荐
dazhi_100的专栏
02-25 6万+
colspan是横向合并；rowspan是纵向合并。 如 回复觉得很分阶段方     //横向的两个单元格进行合并
html文档怎么合并单元格合并单元格合并,html/css怎么合并table单元格？
weixin_31106181的博客
06-09 1959
在前端开发中，html 表单是经常被使用到的，表单可以直观的把信息展现出来，有很好的交互功能；在表单中可以把同一类的信息合并在一起显示，这就需要把同一类的单元格合并在一起，那么怎样才能合并单元格？想要合并table单元格，可以使用colspan属性合并列单元格、使用rowspan属性合并行单元格。colspan 属性规定单元格可横跨的列数，rowspan 属性规定单元格可横跨的行数。下面通过实例来...
HTML表格合并行和列
大河之犬的博客
09-29 2万+
在设计表格时，有时我们需要将“横向的N个单元格”或者“纵向的N个单元格”合并成一个单元格（类似Word的表格合并），这个时候就需要用到“合并行”或“合并列”
html 单元格合并
韩梦飞沙_韩亚飞
01-13 267
<td rowspan="2"> 从这个位置算，向下合并2行。 实现的是2个单元的上下合并。 第2行的这个<td>就不用写了。 被占用了。 同理 左右2列是<td colspan="2">
js对table的td进行相同内容合并示例详解
10-26
我们可以通过改变td的rowspan属性来实现横向合并，或者改变td的colspan属性来实现纵向合并。在本例中，我们将关注如何通过js实现横向合并相同内容的单元格。 我们可以通过以下步骤来实现： 1. 首先，确定需要处理...
JQuery实现表格中相同单元格合并示例代码
10-27
单元格合并通常通过`colspan`和`rowspan`属性实现，`colspan`用于横向合并单元格，而`rowspan`用于纵向合并单元格。 #### 三、JQuery遍历表格和处理单元格 在示例代码中，通过`$("#tbl").find("tr")`获取表格中...
合并相同的单元格
04-03
`colspan`定义了单元格横向合并的列数，而`rowspan`则定义了纵向合并的行数。例如： ```html <td colspan="2">这是合并两列的单元格</td> </tr> <td rowspan="2">这是合并两行的单元格</td> <td>正常...
列表多行多列合并单元格
05-12
综上所述，实现列表多行多列合并单元格涉及到HTML表格的基本操作，以及JavaScript动态计算和设置`colspan`和`rowspan`属性。在开发过程中，还需要考虑交互性、响应式设计和性能优化，确保在各种环境下都能提供良好的...
【Javascript】Javascript横向/纵向合并单元格TD
dongjizheng9270的博客
08-01 361
> 需求是这样滴(>_<) 在报表系统中，涉及“HTML的TD单元格的合并”恐怕为数不少。 比如，从DB查得数据并经过后台的整理后，可能是这样的： Table1 JOBTOTAL SALINDEXEMPNOENAMEJOBMGRHIREDATESALCOMMDEPTNO 1 ANALYST 6000 1 7788 SCOTT AN...
td合并
开心就好
12-21 922
(function($) { JxglUtil = { /** * getDbChar方法 * * 一个中文字所占数据库字符个数 * （1）utf-8：3个字节 * （2）其他字符集：2个字节 */ getDbReplaceChar:function(){ return "...
在＜td＞标签中实现动态字幕横向滚动
Knight_Key的博客
03-29 1391
1、首先看下效果 2、主要是在表格第二列【important】以及【2019-2-21】上加了长度判断。如果长度超过限制范围，就执行横向滚动 3、代码如下： css: <style> .up { color: black; display: block; width: 96%;...
html5表格两列合并_html中的table标签中如何将几个<td>合在一起的
weixin_34471637的博客
01-17 1694
展开全部1、为table表格设置边框合并table{border-collapse:collapse;border-spacing:0;}2、隔行变色和添加内边32313133353236313431303231363533e78988e69d8331333431353963框function addColor() {var tbodyTrList = $(".table tbody tr");v...
html： Table合并行和列
浪漫的偷笑
10-04 1074
原创作品，允许转载，转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。http://yaoyuechengfeng.blog.51cto.com/2958475/1697882&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;title&gt;我的第四个页面&lt;/title&gt;&lt;meta charset...
html两个th合并单元格,10、HTML表格（table 、th、tr、td、合并单元格）的简单认识...
weixin_35470511的博客
06-15 2844
1、表格的定义表格的定义是通过 table 标签来定义的，当然了，如果只是写一个 table 标签，是看不见任何内容的，一个表格是由行和列组成，而在HTML中，行的定义又是由 tr 标签来定义的，列是由 td 标签来定义的。例如：1-11-22-12-2代码效果：这怎么看都不想是表格吧？不急，那是因为HTML表格默认是不显示边框的，所以，我们还要设置表格的边框，如下：(在table标签添加bord...
HTML语言基础（4）制作表格，表格合并
最新发布
qiuluoyuwang的博客
06-06 3151
注：此为看的视频总结方便后续复习，写一章要半小时，可累，点个免费的赞吧，这样我会更有动力更下去的。
tr td分合并单元格
只作为个人备忘录
11-30 9855
ss
html中table表格的行、列怎么进行合并
naozibuok的博客
05-24 7017
在HTML中，使用 <table> 元素来创建表格，而行（tr）和列（td或th）的合并可以通过和属性来实现。这两个属性允许单个表格单元格（td或th）跨越多个列或行。colspan：用于合并列。它定义了一个表格单元格应该横跨多少列。rowspan：用于合并行。它定义了一个表格单元格应该横跨多少行。
JavaScript实现表格中相同行合并与数量汇总方法
`colspan`用于横向合并单元格，`rowspan`用于纵向合并单元格。在本例中，我们将重点关注`colspan`属性。 ### 知识点三：使用JavaScript库简化操作 在上述案例中，文件名中包含了“jquery-1.8.3.min.js”，说明此...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值