<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>
分享到：
相关推荐
利用js合并table相同内容单元格并js方式自动生成，把文本内容复制进js中，应该就知道大概咋用了
当相邻的单元格具有相同内容时，为了减少冗余和优化视觉效果，我们可以将这些单元格合并为一个，通过设置`rowspan`和`colspan`属性来扩展单元格的覆盖范围。`rowspan`定义了单元格跨行的数量，`colspan`则定义了跨列...
要启用单元格合并，我们需要利用其自定义的回调函数和DOM操作。 1. **初始化Datatable**： 首先，我们需要在HTML中创建一个表格，并在JavaScript中初始化DataTable。设置基本参数，如数据源、列定义等： ```html...
在Web开发中，尤其是构建数据报表时，列表多行多列合并单元格是一个常见的需求。这通常涉及到HTML、CSS和JavaScript技术的综合运用，尤其是在使用表格（table）元素展示数据时。下面将详细讲解如何实现这个功能。 ...
本话题聚焦于LayUI中的Table组件，特别是如何实现相同参数的单元格合并功能，这在展示数据时能有效提高信息的可读性和美观性。 LayUI Table的单元格合并功能，主要是通过`parseData`方法和自定义模板来实现的。当...
本js脚本完美的实现了table单元格的合并，合并后犹如交叉表的形式，非常完美，并在其中附带例子可以验证。
为了提升用户体验，我们可以利用JavaScript（js）以及jQuery库来实现表格相同数据的合并功能，使表格看起来更整洁、专业。 首先，我们要理解JavaScript的基本概念。JavaScript是一种轻量级的解释型编程语言，广泛...
如果相同，则将前面单元格的`rowspan`属性值增加，以便将当前单元格与前面单元格合并。这个过程需要对表格中的每一行进行检查和处理，确保所有连续相同内容的单元格都被合并。 在编写JavaScript代码时，需要注意...
最后，虽然HTML和JavaScript可以完成大部分单元格合并的需求，但为了实现更复杂的布局或响应式设计，可能还需要借助CSS。例如，我们可以使用CSS的`display`属性来改变表格单元格的行为，将其转换为块级元素，或者...
Table前端同一列里面内容相同的单元格合并，网上找的存在如下问题： 1、大部分只能合并某一列，不能多列； 2、有些能合并多列的，首列合并后，第二列合并单元格行数不能超过首列合并的单元格行数，虽然第二列值可能...
"layui table合并单元格.zip" 这个压缩包正是提供了关于如何在layui的表格中实现单元格合并的示例和资源。 首先，"layui table.txt" 文件可能包含了layui表格组件的基础用法和API介绍。layui的表格组件支持动态加载...
在Vue.js框架中，实现表格单元格的合并是一项常见的需求，尤其在展示复杂数据或创建报表时。Vue的灵活性使得我们可以轻松地处理这样的任务。...希望这个指南能帮助你理解和实现Vue中的表格单元格合并功能。
jqgrid合并单元格 .jqgrid { width: 80%; margin: 0 auto; } /* 这个代码是解决表头有一点点错位的问题 */ .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-...
只要输入table的id，就可以自动合并单元格，只要上下相邻的单元格相同的，都会合并 html版比较好，点下面的 http://download.csdn.net/source/1276574
在这个“vue-easytable合并单元格”的主题下，我们将深入探讨如何利用Vue Easytable实现表格中的单元格合并。 在传统的HTML表格中，合并单元格通常使用`<td>`的`colspan`和`rowspan`属性来完成，但在Vue Easytable...
在JavaScript中，动态修改表格（Table）以及合并单元格是常见的需求，特别是在...6. 单元格合并：利用`rowSpan`和`colSpan`属性合并单元格。 理解并掌握这些知识点，能帮助你在实际项目中灵活地处理表格数据和布局。
### JSP Table 单元格合并 在网页开发中，表格是展示...综上所述，通过结合 JSP 和 JavaScript 技术，我们可以有效地实现在动态生成的表格中进行单元格合并的功能。这不仅提升了用户体验，也让数据呈现更加直观有序。
js 合并单元格 只有一个方法 思路清晰 可直接使用 注：此方法为合并某一列的单元格 若合并其他 可在吃方法基础上修改
### JavaScript 合并单元格详解 #### 一、概述 在网页开发中，表格是一种非常常见的数据展示形式。为了使表格中的数据呈现更加美观、合理，我们常常需要对某些单元格进行合并操作。本篇文章将重点介绍如何使用...
2. **单元格合并的概念与应用场景**：单元格合并是指在同一列中将相邻的具有相同值的多个单元格合并为一个单元格的过程。 3. **McMergeCells函数的实现逻辑**：该函数是作者原创的一种高效合并单元格的方法，通过对...