<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`方法和自定义模板来实现的。当...
为了提升用户体验，我们可以利用JavaScript（js）以及jQuery库来实现表格相同数据的合并功能，使表格看起来更整洁、专业。 首先，我们要理解JavaScript的基本概念。JavaScript是一种轻量级的解释型编程语言，广泛...
最后，虽然HTML和JavaScript可以完成大部分单元格合并的需求，但为了实现更复杂的布局或响应式设计，可能还需要借助CSS。例如，我们可以使用CSS的`display`属性来改变表格单元格的行为，将其转换为块级元素，或者...
"layui table合并单元格.zip" 这个压缩包正是提供了关于如何在layui的表格中实现单元格合并的示例和资源。 首先，"layui table.txt" 文件可能包含了layui表格组件的基础用法和API介绍。layui的表格组件支持动态加载...
js 实现 动态生成包含合并单元格的表格! 值得下载看看!资源免费,大家分享!!
在Vue.js框架中，实现表格单元格的合并是一项常见的需求，尤其在展示复杂数据或创建报表时。Vue的灵活性使得我们可以轻松地处理这样的任务。...希望这个指南能帮助你理解和实现Vue中的表格单元格合并功能。
js导出execl，自动合并单元格，自动增行，增列
在这个“vue-easytable合并单元格”的主题下，我们将深入探讨如何利用Vue Easytable实现表格中的单元格合并。 在传统的HTML表格中，合并单元格通常使用`<td>`的`colspan`和`rowspan`属性来完成，但在Vue Easytable...
使用js合并单元格，页面初始化的时候执行mergeCell.js里面的方法，合并内容相同的单元格，简单方便。
本文将详细介绍一种在Ext JS中实现数据单元格合并的方法，并通过示例代码来帮助开发者更好地理解和应用这一技术。 #### CSS样式调整 为了实现良好的视觉效果，在开始编写JavaScript代码之前，我们需要对CSS样式做...
### JavaScript 合并单元格详解 #### 一、概述 在网页开发中，表格是一种非常常见的数据展示形式。为了使表格中的数据呈现更加美观、合理，我们常常需要对某些单元格进行合并操作。本篇文章将重点介绍如何使用...
通过查看和学习这些示例，你可以进一步理解和掌握如何使用jQuery实现单元格合并。同时，为了保证代码的可维护性和性能，记得在编写代码时遵循良好的编程实践，如避免不必要的遍历和操作，以及合理地组织和注释代码。
"仿Excel合并单元格实例点击合并表格单元格"是一个这样的尝试，它旨在提供一个用户友好的界面，让用户能够在网页上的表格中实现类似于Excel的单元格合并功能。这一功能对于数据展示、报告生成以及自定义表单设计等...
纯JS导出Excel 处理导出Excel如果是合并单元格了无法显示边框问题 处理插入表头问题 导出Excel样式可自定义
根据提供的文件信息，我们可以深入探讨如何在 Ext JS 中实现 Grid 的单元格合并功能。此案例主要涉及到了自定义 GridView 的 `renderHeaders` 方法来达到单元格合并的目的，并且还涉及了模板（Template）的使用、...