`
yshlin
  • 浏览: 62588 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

合并单元格

阅读更多

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档 </title> 
</head> 

<body> 
<table width="100%" border="1" cellspacing="0" cellpadding="0" id="tab"> 
  <tr> 
    <td>张三 </td> 
    <td>男 </td> 
    <td>22 </td> 
    <td>数学 </td> 
    <td>90 </td> 
  </tr> 
   <tr> 
    <td>张三 </td> 
    <td>男 </td> 
    <td>22 </td> 
    <td>数学 </td> 
    <td>90 </td> 
  </tr> 
  <tr> 
    <td>张三 </td> 
    <td>男 </td> 
    <td>22 </td> 
    <td>语文 </td> 
    <td>70 </td> 
  </tr> 
  <tr> 
    <td>张三 </td> 
    <td>女 </td> 
    <td>22 </td> 
    <td>英语 </td> 
    <td>60 </td> 
  </tr> 
  <tr> 
    <td>李四 </td> 
    <td>女 </td> 
    <td>22 </td> 
    <td>数学 </td> 
    <td>60 </td> 
  </tr> 
  <tr> 
    <td>李四 </td> 
    <td>女 </td> 
    <td>19 </td> 
    <td>语文 </td> 
    <td>60 </td> 
  </tr> 
  <tr> 
    <td>王五 </td> 
    <td>男 </td> 
    <td>19 </td> 
    <td>英语 </td> 
    <td>60 </td> 
  </tr> 
</table> 

<script type="text/javascript">
window.onload = function(){
    var tab = document.getElementByIdx_x_x("tab");
    var maxCol = 3, val, count, start;  //maxCol:合并单元格作用到多少列    
    for(var col = maxCol-1; col >= 0 ; col--){
        count = 1;
        val = "";
        for(var i=0; i<tab.rows.length; i++){
            if(val == tab.rows[i].cells[col].innerHTML){
                count++;
            }else{
                if(count > 1){ //合并
                    start = i - count;
                    tab.rows[start].cells[col].rowSpan = count;
                    for(var j=start+1; j<i; j++){
                        tab.rows[j].cells[col].style.display = "none";
                    }
                    count = 1;
                }
                val = tab.rows[i].cells[col].innerHTML;
            }
        }
        if(count > 1 ){ //合并,最后几行相同的情况下
            start = i - count;
            tab.rows[start].cells[col].rowSpan = count;
            for(var j=start+1; j<i; j++){
                tab.rows[j].cells[col].style.display = "none";
            }
        }
    }
};
</script>
</body> 
</html>

 

分享到:
评论

相关推荐

    delphi dbgrid有条件合并单元格

    描述中提到的“dbgrideh 实现有条件合并单元格的例子”意味着我们将探讨如何利用DBGridEh控件的特性来有条件地合并单元格。DBGridEh 4.2是一个较新的版本,可能包含了针对单元格合并的优化和改进。 实现DBGridEh有...

    jasperReport 动态合并单元格示例

    在jasperReport中,动态合并单元格是一项重要的功能,它能够根据数据的特性和需求灵活调整表格的布局,使得报告更加整洁且易于阅读。本示例将详细介绍如何在jasperReport中实现动态合并单元格。 首先,我们需要了解...

    DataGridView合并单元格(纵向合并及横向合并)

    在探讨“DataGridView合并单元格(纵向合并及横向合并)”这一主题时,我们首先需要理解DataGridView控件在Windows Forms中的重要性以及它如何为数据展示提供灵活且强大的功能。DataGridView是一个用于显示表格数据...

    word NPOI合并单元格示例

    本示例将深入讲解如何利用NPOI库在Word文档中合并单元格,这对于创建报表、表格和其他格式化的文档非常有用。 NPOI是.NET平台上的一个强大的工具,它可以读取和写入Microsoft Office格式的文件。在Word处理方面,...

    EasyExcel-合并单元格.doc

    EasyExcel-合并单元格技术详解 EasyExcel 是一个功能强大的 Excel 处理库,提供了许多便捷的 API 来处理 Excel 文件。在实际应用中,我们经常需要合并单元格,以便更好地展示数据。在本文中,我们将详细介绍如何...

    横向合并单元格.zip

    本篇文章将深入探讨如何在GridControl中实现横向合并单元格以及字体自动换行的功能。 一、横向合并单元格 1. GridControl的合并单元格功能允许用户在显示数据时合并相邻的列,从而提高数据的可读性和美观度。在...

    poi获取合并单元格

    ### POI 获取合并单元格详解 #### 一、概述 Apache POI 是一个流行的 Java 库,用于处理 Microsoft Office 格式的文档,如 Word、Excel 和 PowerPoint。在本篇文章中,我们将详细介绍如何使用 POI 处理 Excel 文件...

    jxls2.0支持合并单元格

    jxls2.0支持合并单元格和合并单元格模板写入数据,jar包里已经包含了pom.xml,可以自行解压方便上传到maven私服,这种方式会带上依赖,否则要一个个手动添加依赖.pom在jar包里jxls-core\2.0\jxls-core-2.0\META-INF\...

    gridControl根据条件合并单元格

    在某些情况下,为了更好地组织数据或突出显示特定信息,我们可能需要合并单元格。例如,当有重复的数据需要汇总时,或者想要创建带有表头的复杂布局时,合并单元格就显得尤为重要。 实现GridControl的单元格合并,...

    excel计算合并单元格所占行数

    ### Excel计算合并单元格所占行数 #### 知识点概述 在Excel中处理大量数据时,常常需要对合并单元格进行各种操作,比如计算它们所占据的行数。这种需求常见于需要统计每组数据的具体行数,或者是在进行数据分析时...

    WPF Datagrid 合并单元格

    在标准的Datagrid中,合并单元格通常涉及到对行和列的范围进行设置。在WPF中,可以通过自定义控件或扩展Datagrid的默认行为来实现复杂的合并功能。描述中的"支持位置拖动、列宽度拖动"意味着这个实现还考虑了用户...

    vue-easytable合并单元格

    在这个“vue-easytable合并单元格”的主题下,我们将深入探讨如何利用Vue Easytable实现表格中的单元格合并。 在传统的HTML表格中,合并单元格通常使用`&lt;td&gt;`的`colspan`和`rowspan`属性来完成,但在Vue Easytable...

    layui table合并单元格.zip

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

    C# DataGridView 合并单元格

    当需要在表格中展示具有层次结构或汇总信息的数据时,合并单元格功能就显得尤为重要。本篇文章将深入探讨如何在C#的`DataGridView`中实现单元格的合并,以增强数据展示的效果。 首先,我们需要理解`DataGridView`的...

    动态的合并单元格(超管用)

    标题中的“动态的合并单元格”指的是在编程中实现表格(如GridView)中单元格的动态合并功能。这种技术常用于数据展示,特别是在处理分类或分组数据时,可以更清晰地呈现信息结构。描述中提到,通过这种方法,编程...

    wpf GridView 合并单元格 Demo

    下面是如何创建一个合并单元格的示例: ```xml , RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}" Visibility="{Binding Path=Column1, Converter={StaticResource ...

    java excel poi合并单元格

    在Excel中,合并单元格意味着多个相邻的单元格被合并成一个大的单元格,其内容占据合并后的所有空间。在Java中使用Apache POI进行操作,我们需要使用`XSSFWorkbook`(对于.xlsx文件)或`HSSFWorkbook`(对于.xls文件...

    datagridview横向合并单元格

    标题"datagridview横向合并单元格"涉及到的是如何在`DataGridView`中实现列的合并,这在展示某些特定类型的数据时非常有用,比如汇总信息或者创建带有标题的复合单元格。下面将详细阐述`DataGridView`的列合并以及...

    NPOI示例:设置样式与合并单元格

    在合并单元格时,你需要调用`ISheet.MergeCells()`方法,传入要合并的单元格区域。例如,`MergeCells(startColumn, startRow, endColumn, endRow)`将从指定的起始列和行到结束列和行的所有单元格合并成一个大单元格...

Global site tag (gtag.js) - Google Analytics