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

最新推荐文章于 2023-02-13 20:38:31 发布
最新推荐文章于 2023-02-13 20:38:31 发布
阅读量678 收藏
点赞数

效果图:
 
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:
复制代码 代码如下:

<script type="text/javascript">
function mc(tableId, startRow, endRow, col) {
var tb = document.getElementById(tableId);
if (col >= tb.rows[0].cells.length) {
return;
}
if (col == 0) { endRow = tb.rows.length-1; }
for (var i = startRow; i < endRow; i++) {
if (tb.rows[startRow].cells[col].innerHTML == tb.rows[i + 1].cells[0].innerHTML) {
tb.rows[i + 1].removeChild(tb.rows[i + 1].cells[0]);
tb.rows[startRow].cells[col].rowSpan = (tb.rows[startRow].cells[col].rowSpan | 0) + 1;
if (i == endRow - 1 && startRow != endRow) {
mc(tableId, startRow, endRow, col + 1);
}
} else {
mc(tableId, startRow, i + 0, col + 1);
startRow = i + 1;
}
}
}
mc('table1',0,0,0);
</script>
中国刘金
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js合并内容相同的单元格
qianhe_he的专栏
03-12 6143
function MergeDateCells(tab) {  //从第二行开始，排除标题行  var startRow = 1;  //循环记录表格中td的内容,用来判断td中的value是否发生了改变  var tdTempV = "";  //如果td的值相同,那么变量加1, 否则将临时变量加入集合中  var rowCount = 1;  //得到相同内容的行数的集合www.
利用js合并table相同内容单元格并js方式自动生成
11-15
利用js合并table相同内容单元格并js方式自动生成，把文本内容复制进js中，应该就知道大概咋用了
Javascript合并表格中具有相同内容的单元格
astrologer_的博客
09-26 3142
HTML或者JSP的TABLE需要不同行但是内容相同的单元格进行合并，本文以省市县为例，对表格中的省市进行二级合并，具体的页面代码和样式不再展示，主要介绍JS如何实现TABLE的单元格合并。
js 相同内容单元格合并
sunglow1006的专栏
02-21 627
function tableSpan(tb1) { //合并行 //列 for (var i = tb1.rows[0].childNodes.length - 1; i >= 0; i--) { //行 for (var j = tb1.rows.length - 1; j > 0; j--) { //当前单元格与上
JavaScript合并table相同内容的单元格
buyue
06-09 590
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Jav
vue 中 elment-ui table合并上下两行相同数据单元格
10-15
在以下示例中，我们定义了一个表格，包含四个列（项目名称、污染区段、塔号和倾斜度）： ```html :header-cell-style="{background:'#6d7f93',color:'white'}" :data="ptableDate" align="center" border v-...
JQuery实现表格中相同单元格合并示例代码
10-27
### JQuery实现表格中相同单元格合并示例代码知识点 #### 一、JQuery与表格单元格合并的基本概念 JQuery是一个快速、小巧、功能丰富的JavaScript库，它简化了HTML文档遍历和事件处理、DOM操作、动画和Ajax交互等...
jQuery实现合并表格单元格中相同行操作示例
10-17
在本示例中，我们将通过jQuery实现合并表格中相同行的单元格操作。这种方法不仅能够帮助开发者减少重复的代码编写，还能快速实现动态数据展示的界面优化。通过具体实例的分析，我们将深入探讨其相关的操作技巧。 ...
JS TABLE CELL 相同内容 单元格 合并
11-14
Table前端同一列里面内容相同的单元格合并，网上找的存在如下问题： 1、大部分只能合并某一列，不能多列； 2、有些能合并多列的，首列合并后，第二列合并单元格行数不能超过首列合并的单元格行数，虽然第二列值可能相同的行数更多。例如： 首列 第二列 a b c b c b 总之很不满意，花了一晚上时间写了一下，希望能解决大部分类似问题。
js合并单元格 相同内容的单元格合并
02-08
demo实例 合并紧挨着的 单元格 通过js实现 希望对大家有帮助
Javascript学习笔记part1(Table单元格相同数据自动合并)补充
FeverDestiny
05-26 764
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>合并表格</title> <script> window.onload = function () { init(table1, 6); }
JavaScript合并网页表格中内容相同的相邻单元格
最新发布
Purpleendurer@CSDN
02-13 1203
继续编写“圳品”信息系统，继续编写“圳品”信息系统，我们已经“圳品”信息读取到JavaScript定义的一个中进行按汉语拼音升序作了排序处理。现在我们可以将保存在二维数组中的各县（区）“圳品”信息在表格中显示出来。 为了直观，我们可以编程将表格中的来自同一个县（区）的县区代码单元格合同起来，对于来自同一个企业有多个产品，则将企业名称单元格合并起来。需要特别注意的是我们合并表格中多列单元格时的顺序，是按照从右到左的顺序来进行的,避免乱套。
html相同数据合并单元格合并单元格,Javascript合并表格中具有相同内容单元格示例...
weixin_31620365的博客
06-04 206
效果图:HTML代码:表格相同内容合并合并前：a12345a12346a2334 b3467 b3567 cc2345 cc2355 d1234 e1234 合并后：a12345a12346a2334 b3467 b3567 cc2345 cc2355 d1234 e1234 JS:function mc(tableId, startRow, endRow, col) {var tb = doc...
js合并具有相同内容的单元格，跨行合并!
初生的萌芽
08-19 3067
//放在html   结尾   function autoRowSpan(tab, row, col) {  //保存最后一个值  var lastvalue="";  //与最后一个值做比较  var value="";  //临时变量   var index=1;  //循环获取tab所有的行数  for(var i=row;i //
[JS&Jquery]实现页面表格中相同内容的行或列合并
u012949335的专栏
11-08 8164
详细链接：https://shop499704308.taobao.com/?spm=a1z38n.10677092.card.11.594c1debsAGeak  &lt;script type="text/javascript" language="javascript"&gt; //基于js写法 function hb() { var tab = docu...
js控制单元格 行 列 相同内容合并
一只狮的专栏
11-16 2705
tabObjId：table 的id  cellindex ：无效，可根据需要修改成有效。 beginRow：从第几行开始，暂时默认传0，其他未测试。 function SpanGrid(tabObjId, cellindex, beginRow) {     var colIndex = cellindex;     var rowBeginIndex = beginRow;
Javascript学习笔记part1(Table单元格相同数据自动合并)
FeverDestiny
05-25 3097
欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦： Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和图片上传 LaTex数学公式 UML序列图和流程图 离线写博客 导入导出Markdown文件 丰富的快捷键 快捷键 加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值