`
jiava9900
  • 浏览: 87525 次
  • 性别: Icon_minigender_1
  • 来自: 天津
社区版块
存档分类
最新评论
阅读更多

    <span style="font-family: Times New Roman;">[size=18px;]<html> <br>
<head> <br>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <br>
<title>合并表格</title> <br>
<script> <br>
/////////////////////////////////////////////// <br>
//功能:合并表格 <br>
//参数:tb-需要合并的表格ID <br>
//参数:colLength--需要对前几列进行合并,比如, <br>
//想合并前两列,后面的数据列忽略合并,colLength应为2 <br>
//缺省表示对全部列合并 <br>
//data:2011.11.06 <br>
/////////////////////////////////////////////// <br>
function uniteTable(tb,colLength){ <br>
//检查表格是否规整 <br>
if(!checkTable(tb)) return; <br>
var i=0; <br>
var j=0; <br>
var rowCount=tb.rows.length; //行数 <br>
var colCount=tb.rows[0].cells.length; //列数 <br>
var obj1=null; <br>
var obj2=null; <br>
//为每个单元格命名 <br>
for(i=0;i<rowCount;i++){ <br>
for(j=0;j<colCount;j++){ <br>
tb.rows[i].cells[j].id="tb__" + i.toString() + "_" + j.toString(); <br>
} <br>
} <br>
//逐列检查合并 <br>
for(i=0;i<colCount;i++){ <br>
if(i==colLength) return; <br>
obj1=document.getElementById("tb__0_"+i.toString()) <br>
for(j=1;j<rowCount;j++){ <br>
obj2=document.getElementById("tb__"+j.toString()+"_"+i.toString()); <br>
if(obj1.innerText==obj2.innerText){ <br>
obj1.rowSpan++; <br>
obj2.parentNode.removeChild(obj2); <br>
}else{ <br>
obj1=document.getElementById("tb__"+j.toString()+"_"+i.toString()); <br>
} <br>
} <br>
} <br>
} <br><br>
///////////////////////////////////////// <br>
//功能:检查表格是否规整 <br>
//参数:tb--需要检查的表格ID <br>
//data: 2011.11.06<br>
///////////////////////////////////////// <br>
function checkTable(tb){ <br>
if(tb.rows.length==0) return false; <br>
if(tb.rows[0].cells.length==0) return false; <br>
for(var i=0;i<tb.rows.length;i++){ <br>
if(tb.rows[0].cells.length!=tb.rows[i].cells.length) return false; <br>
} <br>
return true; <br>
} <br>
</script> <br>
</head> <br>
<body> <br>
<table width="400" border="1" id="table1"> <br>
<tr> <br>
<td>a</td> <br>
<td>for</td> <br>
<td>100</td> <br>
<td>200</td><br>
<td>1</td> <br>
</tr> <br>
<tr> <br>
<td>a</td> <br>
<td>for</td> <br>
<td>100</td> <br>
<td>300</td> <br>
<td>2</td> <br>
</tr> <br>
<tr> <br>
<td>a</td> <br>
<td>if</td> <br>
<td>100</td> <br>
<td>200</td> <br>
<td>3</td> <br>
</tr> <br>
<tr> <br>
<td>a</td> <br>
<td>if</td> <br>
<td>300</td> <br>
<td>230</td> <br>
<td>4</td> <br>
</tr> <br>
<tr> <br>
<td>a</td> <br>
<td>if</td> <br>
<td>320</td> <br>
<td>230</td> <br>
<td>5</td> <br>
</tr> <br>
</table> <br>
<br><input type="button" value="合并表格" onClick="uniteTable(table1,4)"> <br>
</body> <br>
</html>[/size] </span>
 
0
0
分享到:
评论

相关推荐

    js合并单元格 相同内容的单元格合并

    本文将深入探讨如何使用JavaScript来实现相同内容的单元格合并。 首先,我们需要理解HTML表格的基本结构。一个表格由`&lt;table&gt;`元素定义,其中包含`&lt;tr&gt;`(行)和`&lt;td&gt;`(单元格)元素。如果要合并单元格,我们通常...

    Javascript导出Excel,自动合并单元格、自动列宽、有进度条

    js导出execl,自动合并单元格,自动增行,增列

    javascript合并单元格

    ### JavaScript 合并单元格详解 #### 一、概述 在网页开发中,表格是一种非常常见的数据展示形式。为了使表格中的数据呈现更加美观、合理,我们常常需要对某些单元格进行合并操作。本篇文章将重点介绍如何使用...

    layui table合并单元格.zip

    "layui table合并单元格.zip" 这个压缩包正是提供了关于如何在layui的表格中实现单元格合并的示例和资源。 首先,"layui table.txt" 文件可能包含了layui表格组件的基础用法和API介绍。layui的表格组件支持动态加载...

    JS实现动态修改table及合并单元格的方法示例

    在JavaScript中,动态修改表格(Table)以及合并单元格是常见的需求,特别是在处理数据展示或者报表生成时。以下将详细介绍如何使用JS实现这些功能。 首先,要动态修改表格,我们需要获取表格元素。在HTML中,表格...

    jquery datatable 单元格合并

    要启用单元格合并,我们需要利用其自定义的回调函数和DOM操作。 1. **初始化Datatable**: 首先,我们需要在HTML中创建一个表格,并在JavaScript中初始化DataTable。设置基本参数,如数据源、列定义等: ```html...

    列表多行多列合并单元格

    综上所述,实现列表多行多列合并单元格涉及到HTML表格的基本操作,以及JavaScript动态计算和设置`colspan`和`rowspan`属性。在开发过程中,还需要考虑交互性、响应式设计和性能优化,确保在各种环境下都能提供良好的...

    将HtmlTable 导出为Execl文件,支持合并单元格、合并行,无需Office支持

    本项目提供了一个解决方案,它支持合并单元格和合并行,无需依赖Microsoft Office,这对于那些无法安装Office环境或者希望在服务器端执行此操作的用户来说,具有很高的实用价值。 首先,我们要理解HTML表格...

    ext表格合并单元格的方法

    在进行Web开发时,特别是在使用Ext JS框架处理表格数据展示的过程中,经常会遇到需要合并单元格的情况。这不仅可以提升数据展示的美观性,还能增强数据的可读性和逻辑性。Ext JS提供了强大的表格组件GridPanel,但...

    javascript 万能table合并单元格 js版

    只要输入table的id,就可以自动合并单元格,只要上下相邻的单元格相同的,都会合并 html版比较好,点下面的 http://download.csdn.net/source/1276574

    Ext grid合并单元格

    根据提供的文件信息,我们可以深入探讨如何在 Ext JS 中实现 Grid 的单元格合并功能。此案例主要涉及到了自定义 GridView 的 `renderHeaders` 方法来达到单元格合并的目的,并且还涉及了模板(Template)的使用、...

    仿Excel合并单元格实例点击合并表格单元格.zip

    综上所述,"仿Excel合并单元格实例点击合并表格单元格"是一个融合了JavaScript编程、DOM操作、事件处理、CSS样式设计、数据管理和性能优化等多个技术领域的项目。通过学习和实践这样的实例,开发者不仅可以提升自己...

    js 合并单元格2例

    总结,js合并单元格主要通过设置`colspan`和`rowspan`属性实现,而实际操作中,我们还需要结合JavaScript的DOM操作能力来满足动态需求。理解这些基础知识和技巧,能帮助我们在开发中更高效地处理表格数据和布局。

    vue合并单元格

    在本篇内容中,我们将深入探讨如何在Vue项目中实现“vue合并单元格”的功能。 首先,让我们了解表格的基本结构。在HTML中,`&lt;table&gt;`元素用于创建表格,而`&lt;tr&gt;`表示行,`&lt;th&gt;`表示表头单元格,`&lt;td&gt;`表示普通数据...

    javascript万能table合并单元格,隐藏列 html版

    ### JavaScript 实现 HTML Table 单元格合并及隐藏列功能详解 #### 一、背景介绍 在处理 HTML 表格时,我们经常会遇到需要合并相同数据的单元格以及根据需求显示或隐藏某些列的情况。例如,在报表展示或者数据汇总...

    table合并单元格的多种方法

    在表格(Table)设计中,有时我们需要合并单元格来达到特定的展示效果,例如创建标题行或列,或者为了美观和布局对齐。在HTML、CSS以及JavaScript中,都有多种方式可以实现单元格的合并。这里我们将详细探讨六种合并...

    table-rowspan表格自动合并单元格插件

    3. **单元格合并**:在网页开发中,如果需要将多个相邻的单元格合并成一个大单元格,可以使用`rowspan`和`colspan`属性。`colspan`与`rowspan`类似,但作用于列的跨度。合并单元格可以提高表格布局的复杂性和美感。 ...

    富文本编辑器以及表格操作,可拉伸单元格宽度、增加行、增加列、合并单元格

    4. **合并单元格**:合并单元格功能允许用户将相邻的单元格组合成一个大的单元格,常用于创建标题或合并相同的数据。用户可以选择多个单元格,然后执行“合并单元格”操作,以实现这一效果。 5. **其他表格操作**:...

    jQuery实现合并单元格功能

    本教程将探讨如何利用jQuery实现一个简单的合并单元格功能,这个功能在数据展示,尤其是表格格式的数据处理中十分常见,例如在模拟Excel表格或者自定义数据报表时。 首先,我们需要了解HTML表格的基本结构。...

    合并单元格例子(jquery)

    除了基本的单元格合并,还可以根据业务需求进行更复杂的逻辑,比如根据特定条件合并单元格,或者在动态生成的表格中自动处理合并。这种灵活性是jQuery作为强大库的一大优势。 这个"合并单元格例子(jquery)"应该...

Global site tag (gtag.js) - Google Analytics