<table id="mytable" width="14%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="40%">A</td>
<td width="60%">1</td>
</tr>
<tr>
<td width="40%">A</td>
<td width="60%">2</td>
</tr>
<tr>
<td width="40%">B</td>
<td width="60%">1</td>
</tr>
<tr>
<td width="40%">B</td>
<td width="60%">1</td>
</tr>
<tr>
<td width="40%">B</td>
<td width="60%">3</td>
</tr>
<tr>
<td width="40%">A</td>
<td width="60%">1</td>
</tr>
</table>
<input type="button" value="merge" onclick="mergeCell()">
<script language="javascript">
function mergeCell()
{
var rows=mytable.rows;
var nrow=0,nlastrow;
var ncol=0;//for first column only,but you can use a loop here,if you want
while(nrow <rows.length)
{
nlastrow=nrow++;
while(nrow<rows.length && rows[nlastrow].cells[ncol].innerText==rows[nrow].cells[ncol].innerText)
{
nrow++;
if(nrow-nlastrow>1)
{
for(var i=nlastrow+1;i<nrow;i++)
rows[i].deleteCell(ncol);
}
rows[nlastrow].cells[ncol].rowSpan=nrow-nlastrow;
}
}
}
</script>
另一个函数
function SpanGrid(tabObj,colIndex)
{
if(tabObj != null)
{
var i,j;
var intSpan;
var strTemp;
for(i = 0; i < tabObj.rows.length; i++)
{
intSpan = 1;
strTemp = tabObj.rows[i].cells[colIndex].innerText;
for(j = i + 1; j < tabObj.rows.length; j++)
{
if(strTemp == tabObj.rows[j].cells[colIndex].innerText)
{
intSpan++;
tabObj.rows[i].cells[colIndex].rowSpan = intSpan;
tabObj.rows[j].cells[colIndex].style.display = "none";
}
else
{
break;
}
}
i = j - 1;
}
}
}
分享到:
相关推荐
### JavaScript 合并单元格详解 #### 一、概述 在网页开发中,表格是一种非常常见的数据展示形式。为了使表格中的数据呈现更加美观、合理,我们常常需要对某些单元格进行合并操作。本篇文章将重点介绍如何使用...
js 合并单元格 只有一个方法 思路清晰 可直接使用 注:此方法为合并某一列的单元格 若合并其他 可在吃方法基础上修改
总结,js合并单元格主要通过设置`colspan`和`rowspan`属性实现,而实际操作中,我们还需要结合JavaScript的DOM操作能力来满足动态需求。理解这些基础知识和技巧,能帮助我们在开发中更高效地处理表格数据和布局。
在JavaScript编程中,合并单元格是一项常见的需求,特别是在处理HTML表格时。这通常涉及到优化数据展示,例如在报告或统计中避免重复信息占用过多空间。本文将深入探讨如何使用JavaScript来实现相同内容的单元格合并...
js导出execl,自动合并单元格,自动增行,增列
通过Datatables的`drawCallback`或`initComplete`事件,在表格渲染完成后合并单元格。遍历预处理得到的合并信息,使用DOM操作修改表格结构。 ```javascript $('#example').DataTable({ // ...其他配置... ...
在这个“vue-easytable合并单元格”的主题下,我们将深入探讨如何利用Vue Easytable实现表格中的单元格合并。 在传统的HTML表格中,合并单元格通常使用`<td>`的`colspan`和`rowspan`属性来完成,但在Vue Easytable...
"layui table合并单元格.zip" 这个压缩包正是提供了关于如何在layui的表格中实现单元格合并的示例和资源。 首先,"layui table.txt" 文件可能包含了layui表格组件的基础用法和API介绍。layui的表格组件支持动态加载...
在JavaScript中,动态修改表格(Table)以及合并单元格是常见的需求,特别是在处理数据展示或者报表生成时。以下将详细介绍如何使用JS实现这些功能。 首先,要动态修改表格,我们需要获取表格元素。在HTML中,表格...
综上所述,实现列表多行多列合并单元格涉及到HTML表格的基本操作,以及JavaScript动态计算和设置`colspan`和`rowspan`属性。在开发过程中,还需要考虑交互性、响应式设计和性能优化,确保在各种环境下都能提供良好的...
本项目提供了一个解决方案,它支持合并单元格和合并行,无需依赖Microsoft Office,这对于那些无法安装Office环境或者希望在服务器端执行此操作的用户来说,具有很高的实用价值。 首先,我们要理解HTML表格...
在描述中提到的"bootstrap-table导出合并单元格"是该插件的一个高级特性,允许用户在导出表格时,将具有相同内容的单元格进行合并,以提高数据的可读性和美观性。 1. **Bootstrap Table简介** Bootstrap Table是一...
只要输入table的id,就可以自动合并单元格,只要上下相邻的单元格相同的,都会合并 html版比较好,点下面的 http://download.csdn.net/source/1276574
根据提供的文件信息,我们可以深入探讨如何在 Ext JS 中实现 Grid 的单元格合并功能。此案例主要涉及到了自定义 GridView 的 `renderHeaders` 方法来达到单元格合并的目的,并且还涉及了模板(Template)的使用、...
在本篇内容中,我们将深入探讨如何在Vue项目中实现“vue合并单元格”的功能。 首先,让我们了解表格的基本结构。在HTML中,`<table>`元素用于创建表格,而`<tr>`表示行,`<th>`表示表头单元格,`<td>`表示普通数据...
winform使用Microsoft.Office.Interop.Excel读取带有合并单元格的Excel的demo,Excel版本不限,可以是.xls可以是.xlsx版本。本程序采用webbrowser显示读取的数据,使用bootstrap的css样式美化table表格,使用Json...
综上所述,"仿Excel合并单元格实例点击合并表格单元格"是一个融合了JavaScript编程、DOM操作、事件处理、CSS样式设计、数据管理和性能优化等多个技术领域的项目。通过学习和实践这样的实例,开发者不仅可以提升自己...
4. **合并单元格**:合并单元格功能允许用户将相邻的单元格组合成一个大的单元格,常用于创建标题或合并相同的数据。用户可以选择多个单元格,然后执行“合并单元格”操作,以实现这一效果。 5. **其他表格操作**:...
通过这个"table-rowspan表格自动合并单元格插件",开发者可以轻松地实现复杂表格布局的动态管理,提升用户体验,同时减轻了手动调整表格的繁琐工作。这个插件的使用涉及到了HTML、CSS和JavaScript的综合应用,是前端...