`
zwt2001267
  • 浏览: 443074 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

js合并单元格

阅读更多
<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合并单元格

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

    js 合并单元格

    js 合并单元格 只有一个方法 思路清晰 可直接使用 注:此方法为合并某一列的单元格 若合并其他 可在吃方法基础上修改

    js 合并单元格2例

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

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

    在JavaScript编程中,合并单元格是一项常见的需求,特别是在处理HTML表格时。这通常涉及到优化数据展示,例如在报告或统计中避免重复信息占用过多空间。本文将深入探讨如何使用JavaScript来实现相同内容的单元格合并...

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

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

    jquery datatable 单元格合并

    通过Datatables的`drawCallback`或`initComplete`事件,在表格渲染完成后合并单元格。遍历预处理得到的合并信息,使用DOM操作修改表格结构。 ```javascript $('#example').DataTable({ // ...其他配置... ...

    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的表格组件支持动态加载...

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

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

    列表多行多列合并单元格

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

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

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

    bootstrap-table导出合并单元格

    在描述中提到的"bootstrap-table导出合并单元格"是该插件的一个高级特性,允许用户在导出表格时,将具有相同内容的单元格进行合并,以提高数据的可读性和美观性。 1. **Bootstrap Table简介** Bootstrap Table是一...

    javascript 万能table合并单元格 js版

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

    Ext grid合并单元格

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

    vue合并单元格

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

    Winform导入导出带有合并单元格的Excel

    winform使用Microsoft.Office.Interop.Excel读取带有合并单元格的Excel的demo,Excel版本不限,可以是.xls可以是.xlsx版本。本程序采用webbrowser显示读取的数据,使用bootstrap的css样式美化table表格,使用Json...

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

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

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

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

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

    通过这个"table-rowspan表格自动合并单元格插件",开发者可以轻松地实现复杂表格布局的动态管理,提升用户体验,同时减轻了手动调整表格的繁琐工作。这个插件的使用涉及到了HTML、CSS和JavaScript的综合应用,是前端...

Global site tag (gtag.js) - Google Analytics