<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
function uniteTdCells(tableId){
var table = document.getElementById(tableId);
for(i=0;i<table.rows.length;i++){
for(c=0;c<table.rows[i].cells.length;c++){
if(c==0||c==1||c==2||c==3) //选择要合并的列序数，去掉默认全部合并
for(j=i+1;j<table.rows.length;j++){
var cell1=table.rows[i].cells[c].innerHTML;
var cell2=table.rows[j].cells[c].innerHTML;
if(cell1==cell2){
table.rows[j].cells[c].style.display='none';
table.rows[i].cells[c].rowSpan++;
} else break; }
} } }
function closeTD(id){
var table = document.getElementById(id);
for(i=0;i<table.rows.length;i++){
for(c=0;c<table.rows[i].cells.length;c++){
if(c==1||c==2)
if(table.rows[i].cells[c].style.display=='none')
table.rows[i].cells[c].style.display='block';
else if(table.rows[i].cells[c].style.display=='block'||table.rows[i].cells[c].style.display=='')
table.rows[i].cells[c].style.display='none';
}
} }
</script>
<table border="1" id="dd">
<tr><td>1</td><td>3</td><td>5</td><td>1</td></tr>
<tr><td>1</td><td>3</td><td>5</td><td>1</td></tr>
<tr><td>2</td><td>3</td><td>8</td><td>1</td></tr>
<tr><td>2</td><td>4</td><td>8</td><td>3</td></tr>
<tr><td>2</td><td>3</td><td>3</td><td>4</td></tr>
<tr><td>2</td><td>3</td><td>3</td><td>4</td></tr>
<tr><td>2</td><td>4</td><td>8</td><td>4</td></tr>
<tr><td>2</td><td>4</td><td>8</td><td>4</td></tr>
</table>
<input type="button" value="合并" onclick="uniteTdCells('dd')">
<input type="button" value="隐藏/显示列" onclick="closeTD('dd')">
<input type="button" value="刷新" onclick="location.href='uniteCells.html'">
</body>
</html>
分享到：
相关推荐
在JavaScript编程中，合并表格相同数据列是一种常见的需求，特别是在数据展示或数据分析中。这个任务通常涉及对HTML表格（`<table>`元素）的操作，尤其是处理具有大量重复数据的列。在给定的资源中，"colm2.html"...
/* * 说明: * 表格第一列为标题列,列数以第一列为基准, * 列合并设置 : 在列元素上添加 ... * 如果整个表格中的行都要合并请设置第一列的colspans超过表格列最大值 * 的数,并且其它列取消colspans设置值 * */
本篇文章将详细探讨如何在Bootstrap中实现表格列合并，特别是按照每四列进行合并的技巧。 首先，理解Bootstrap表格的基本结构至关重要。一个Bootstrap表格由`<table>`标签开启，内部包含`<thead>`（表头）、`...
在给定的文件中，`test.html`可能是用来展示合并表格效果的示例页面，而`jquery-2.0.3.min.js`是jQuery库的文件，用于支持JavaScript代码。你可以通过打开`test.html`并查看源代码，学习如何在实际项目中应用上述...
综上所述，通过JavaScript合并表格中具有相同内容的单元格，可以有效地简化表格结构，提高信息展示的效率和美观度。在实现时，需要综合运用HTML、CSS和JavaScript的知识，特别注意DOM操作和属性设置的准确性，以确保...
当表格中的某一列数据重复时，为了提高用户体验和视觉效果，我们可以将相同数据的单元格进行合并。下面我们将详细介绍如何利用 Vue Element 来实现这个功能。 首先，我们需要在模板（template）部分创建一个 `el-...
在JavaScript编程中，处理表格数据是一项常见的任务，尤其是在前端开发中。本篇文章将详细探讨如何利用JavaScript实现基于特定条件的筛选和单元格合并功能。首先，我们从筛选表格开始。 筛选表格是根据预设条件过滤...
【jQuery合并表格中相同文本的相邻单元格】 在网页开发中，经常需要处理表格数据，尤其是在展示大量重复信息时，为了提高数据可读性，通常会采用合并相同内容的单元格来减少冗余。jQuery是一个强大的JavaScript库，...
当表格数据中存在相同参数时，我们可以将这些参数对应的单元格合并为一个，减少重复信息，增强视觉效果。下面我们将详细探讨如何操作。 1. **理解LayUI Table的基础使用** 在使用单元格合并功能前，我们需要了解...
### EasyUI指定列-合并相同数据行 #### 易理解释与应用场景 在日常的数据处理过程中，经常会遇到需要对表格中的重复数据进行整理的情况。EasyUI作为一种轻量级的用户界面库，提供了丰富的功能来帮助开发者高效地...
在Web开发中，尤其是构建数据报表时，列表多行多列合并单元格是一个常见的需求。这通常涉及到HTML、CSS和JavaScript技术的综合运用，尤其是在使用表格（table）元素展示数据时。下面将详细讲解如何实现这个功能。 ...
在HTML文档中使用JavaScript来自动合并表格中相同行的单元格是一种常见的前端开发技术。这种技术可以提高页面的可读性，尤其是在处理具有相同值的重复数据时。上述代码示例提供了一种简单而有效的方法来实现这一功能...
本篇文章将探讨几种在JavaScript和jQuery中实现表格行合并的方法。 首先，我们理解表格的基本结构。HTML表格由`<table>`、`<tr>`（行）、`<td>`（单元格）和`<th>`（表头单元格）等元素构成。行合并通常涉及到`<td>...
例如，在报表展示或者数据汇总场景中，通过合并单元格可以使得表格更加简洁明了，而隐藏不必要的列则可以让用户更专注于重要的数据。 #### 二、代码解析 本文将详细介绍如何使用 JavaScript 实现上述功能，并结合...
当面对大量重复或相似的数据时，合并表格行的功能可以极大地提升数据展示的清晰度和用户体验。本文将深入探讨如何实现“合并table的行”这一功能，以及其背后的原理与应用场景。 ### 合并table的行：原理与实现 在...
3. **增加行和列**：当用户需要在现有表格中添加更多数据时，可以轻松地通过右键点击表格并选择“插入行”或“插入列”来扩展表格结构。这有助于保持表格的结构清晰，避免数据混乱。 4. **合并单元格**：合并单元格...
在合并表格中，我们需要通过ColumnModel来控制哪些列应该合并。 3. **CellMerge**: EXTjs并没有直接提供合并单元格的API，但可以通过自定义插件或扩展实现。基本思路是在渲染单元格时检查相邻单元格的内容，如果...
首先，理解需求：在表格中，如果相邻的列（column）内容相同，我们将其合并成一个单元格，只显示一次内容，这样可以使表格看起来更整洁，减少重复信息，从而提升用户对页面内容的理解和感知。 要实现这个功能，我们...
标题中提到的“合并表格行记录”，通常是指在具有相同某一列值的连续行中，合并这些行的特定单元格，保留该列的值，同时合并其他列的内容。 在描述中提到的博客链接中，可能详细介绍了如何使用jQuery来实现这个功能...
这里我们将详细探讨六种合并表格单元格的方法。 1. **HTML中的`colspan`和`rowspan`属性** HTML表格元素中的`<td>`（表格数据单元格）支持`colspan`和`rowspan`属性。`colspan`用来指定单元格跨越的列数，而`...