<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS合并相临相同的单元格</title>
</head>
<body>
<table border='1' width='25%' align='center' id="tab">
<tr> <td>张三</td> <td>数学</td> <td>90</td> </tr>
<tr> <td>张三</td> <td>语文</td> <td>70</td> </tr>
<tr> <td>张三</td> <td>英语</td> <td>60</td> </tr>
<tr> <td>李四</td> <td>数学</td> <td>60</td> </tr>
<tr> <td>李四</td> <td>语文</td> <td>60</td> </tr>
<tr> <td>王五</td> <td>英语</td> <td>60</td> </tr>
</table>
<script language = 'javascript'>
/*
var tab=document.getElementById("tab");
var name="";
for(var i=0,j=0;i <tab.rows.length;i++,j++) {
if(name==tab.rows[i].cells[0].innerHTML) {
tab.rows[i].deleteCell(0);
} else {
name=tab.rows[i].cells[0].innerHTML;
if(i>0)tab.rows[i-j].cells[0].rowSpan=j;
j=0;
}
}
window.onload=function(){
var tab=document.getElementById("tab");
for(i=tab.rows.length-1;i>0;i--){
for(j=tab.rows[i].cells.length-1;j>=0;j--){
if(tab.rows[i].cells[j].innerText==tab.rows[i-1].cells[j].innerText){
tab.rows[i-1].cells[j].rowSpan=tab.rows[i].cells[j].rowSpan+1;
tab.rows[i].deleteCell(j);
}
}
}
alert(tab.cols.length);
}
*/
</script>
<script>
var tab=document.getElementById("tab");
var name="";
for(var i=0,j=0;i<tab.rows.length;i++,j++){
if(name==tab.rows[i].cells[0].innerHTML) {
tab.rows[i].deleteCell(0);
}else{
name=tab.rows[i].cells[0].innerHTML;if(i>0)tab.rows[i-j].cells[0].rowSpan=j;
j=0;
}
if(i == tab.rows.length-1){
tab.rows[i-j].cells[0].rowSpan=j+1;
}
}
</script>
</body>
</html>
分享到：
相关推荐
本文将深入探讨如何使用JavaScript来实现相同内容的单元格合并。 首先，我们需要理解HTML表格的基本结构。一个表格由`<table>`元素定义，其中包含`<tr>`（行）和`<td>`（单元格）元素。如果要合并单元格，我们通常...
利用js合并table相同内容单元格并js方式自动生成，把文本内容复制进js中，应该就知道大概咋用了
在HTML文档中使用JavaScript来自动合并表格中相同行的单元格是一种常见的前端开发技术。这种技术可以提高页面的可读性，尤其是在处理具有相同值的重复数据时。上述代码示例提供了一种简单而有效的方法来实现这一功能...
在Web开发中，尤其是构建数据报表时，列表多行多列合并单元格是一个常见的需求。这通常涉及到HTML、CSS和JavaScript技术的综合运用，尤其是在使用表格（table）元素展示数据时。下面将详细讲解如何实现这个功能。 ...
本js脚本完美的实现了table单元格的合并，合并后犹如交叉表的形式，非常完美，并在其中附带例子可以验证。
本话题聚焦于LayUI中的Table组件，特别是如何实现相同参数的单元格合并功能，这在展示数据时能有效提高信息的可读性和美观性。 LayUI Table的单元格合并功能，主要是通过`parseData`方法和自定义模板来实现的。当...
最后，虽然HTML和JavaScript可以完成大部分单元格合并的需求，但为了实现更复杂的布局或响应式设计，可能还需要借助CSS。例如，我们可以使用CSS的`display`属性来改变表格单元格的行为，将其转换为块级元素，或者...
"layui table合并单元格.zip" 这个压缩包正是提供了关于如何在layui的表格中实现单元格合并的示例和资源。 首先，"layui table.txt" 文件可能包含了layui表格组件的基础用法和API介绍。layui的表格组件支持动态加载...
js 实现 动态生成包含合并单元格的表格! 值得下载看看!资源免费,大家分享!!
js导出execl，自动合并单元格，自动增行，增列
《SpreadJS：实现合并单元格的数据绑定》 SpreadJS 是一款功能强大的JavaScript表格控件，由葡萄城开发，它提供了一种高效的方式在Web应用中创建、编辑和展示电子表格数据。在这个“spreadjs_包含合并单元格的数据...
在这个“vue-easytable合并单元格”的主题下，我们将深入探讨如何利用Vue Easytable实现表格中的单元格合并。 在传统的HTML表格中，合并单元格通常使用`<td>`的`colspan`和`rowspan`属性来完成，但在Vue Easytable...
使用js合并单元格，页面初始化的时候执行mergeCell.js里面的方法，合并内容相同的单元格，简单方便。
本文将详细介绍一种在Ext JS中实现数据单元格合并的方法，并通过示例代码来帮助开发者更好地理解和应用这一技术。 #### CSS样式调整 为了实现良好的视觉效果，在开始编写JavaScript代码之前，我们需要对CSS样式做...
2. 单元格合并：单元格合并是指将多个相邻的单元格合并为一个大单元格，可以横向（colspan）或纵向（rowspan）合并。 二、合并方法 1. colspan属性：`<td>`或`<th>`元素的`colspan`属性表示该单元格横向跨越的列数...
纯JS导出Excel 处理导出Excel如果是合并单元格了无法显示边框问题 处理插入表头问题 导出Excel样式可自定义
### JavaScript 合并单元格详解 #### 一、概述 在网页开发中，表格是一种非常常见的数据展示形式。为了使表格中的数据呈现更加美观、合理，我们常常需要对某些单元格进行合并操作。本篇文章将重点介绍如何使用...
2. **单元格合并的概念与应用场景**：单元格合并是指在同一列中将相邻的具有相同值的多个单元格合并为一个单元格的过程。 3. **McMergeCells函数的实现逻辑**：该函数是作者原创的一种高效合并单元格的方法，通过对...
通过查看和学习这些示例，你可以进一步理解和掌握如何使用jQuery实现单元格合并。同时，为了保证代码的可维护性和性能，记得在编写代码时遵循良好的编程实践，如避免不必要的遍历和操作，以及合理地组织和注释代码。
根据提供的文件信息，我们可以深入探讨如何在 Ext JS 中实现 Grid 的单元格合并功能。此案例主要涉及到了自定义 GridView 的 `renderHeaders` 方法来达到单元格合并的目的，并且还涉及了模板（Template）的使用、...