- 浏览: 188685 次
- 性别:
- 来自: 深圳
文章分类
最新评论
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>Fancy Navigation with CSS & jQuery - Tutorial by Soh Tanaka</title>
<script type="text/javascript" src="file:///E|/DreameaverHtml/jquery-1.4.2.js"></script>
<script type="text/javascript">
/**
* willcheck:要进行处理的表格对象(或者行的集合即可)
* colnum:要进行合并单元格的列
*/
function coltogather(willcheck,colnum){
var alltext = [],togotherNum = [],oldnum = [],id=1,lasttext=null,rmflag=1;
//逐列的数据进行扫描,得到里面的不重复的数据,以及各个数据的数目,然后将依据此结果进行设置rowspan属性
willcheck.each(function(){
var _rmnum = this.getAttribute('rmnum');
if(!_rmnum)_rmnum=0;
var trdom= jQuery('td:eq('+(colnum-_rmnum)+')',this)
var text = jQuery(trdom).text();
//如果上一行记录文本为空,说明是第一行
if(lasttext==null) {
lasttext = text;
}else {
//如果当前行和上一行记录一样,说明要进行合并,合并的单元格数目就加1
if(lasttext!=text){
togotherNum.push(id);
lasttext = text;
id = 1;
} else{
id++;
}
}
});
togotherNum.push(id);
//复制allnum数组中的数据到oldnum数组
jQuery.each(togotherNum, function(i, n){
oldnum[i] =n;
});
var index = 0,len = togotherNum.length;
//逐行进行处理,设置指定列的rowspan属性,以及将要合并的单元格remove!
willcheck.each(function() {
// 得到一个属性表示该行已经被移除了几个td
var _rmnum = this.getAttribute('rmnum');
if (!_rmnum)
_rmnum = 0;
var tddom = jQuery('td:eq(' + (colnum - _rmnum) + ')', this)
if (togotherNum[index] == oldnum[index]) {
tddom.attr('rowSpan', togotherNum[index]);
if(togotherNum[index]>1)
togotherNum[index] = togotherNum[index] - 1;
else
index++;
} else {
if (togotherNum[index] == 0) {
index++;
tddom.attr('rowSpan', togotherNum[index]);
} else {
tddom.remove();
if(--togotherNum[index]==0){
index++;
}
}
// 移除了td之后,要在tr里面添加一个属性标示已经移除的td的数目
if (_rmnum == 0) {
jQuery(this).attr('rmnum', 1);
} else {
jQuery(this).attr('rmnum', 1 + _rmnum * 1);
}
}
});
//清空数组
alltext = null;
togotherNum = null;
oldnum = null;
}
function isinarr(arr,str){
for(var i=arr.length-1;i>=0;i-- ){
if(arr[i]==str)
{return i;
}
}
return -1;
}
function checktable(id){
var tdnum=0;
$('#'+id+' tr').each(function(){
if(tdnum==0){
tdnum = $('td',this).size();
}else{
if(tdnum!=$('td',this).size()){
tdnum = -1;
return false;
}
}
});
if(tdnum>0)
return true;
return false;
}
function go() {
if(!checktable('aaa')){
return false;
}else{
coltogather($('#aaa tr'),0);
coltogather($('#aaa tr'),1);
coltogather($('#aaa tr'),2);
}
}
$(document).ready(function(){go();});
</script>
</head>
<body>
<button onclick='go()'> 合并单元格</button>
<TABLE id='aaa' border='1 red'>
<TR>
<TD>111</TD>
<TD>22</TD>
<TD>33</TD>
<TD>11</TD>
<TD>22</TD>
<TD>33</TD>
</TR>
<TR>
<TD>111</TD>
<TD>22</TD>
<TD>33</TD>
<TD>11</TD>
<TD>22</TD>
<TD>33</TD>
</TR>
<TR>
<TD>22</TD>
<TD>22</TD>
<TD>33</TD>
<TD>11</TD>
<TD>22</TD>
<TD>33</TD>
</TR>
<TR>
<TD>55</TD>
<TD>22</TD>
<TD>66</TD>
<TD>11</TD>
<TD>22</TD>
<TD>33</TD>
</TR>
<TR>
<TD>55</TD>
<TD>22</TD>
<TD>66</TD>
<TD>11</TD>
<TD>22</TD>
<TD>33</TD>
</TR>
</TABLE>
</body>
</html>
发表评论
文章已被作者锁定,不允许评论。
-
使用SignalR构建一个最基本的web聊天室
2015-01-06 15:09 761使用SignalR,可以使用服务器消息推送到客户端,件demo ... -
lazyload异步加载图片
2014-12-24 15:18 531如果一个网页很长并且有很多图片的话,下载图片就需要很多时间 ... -
checbox,redio超强样式运用
2013-06-04 16:49 796<html xmlns="http://ww ... -
一个避免用户重复点击按钮造成重复数据的小技巧
2013-01-13 16:13 1218<script> //启用 ... -
.net 用JQuery+ajax实现批量上传图片
2012-08-07 23:15 1500先看效果图 点击增加按钮,会增加一个选择框, ... -
类似QQ选择组
2012-04-11 19:07 743<style>td {font:12px;}.ti ... -
javascript弹出窗口大全
2011-09-21 20:27 696关键字: 弹出窗口 如何利用网页弹出各种形式的窗口,我想大家大 ... -
一些实用的jQuery代码片段
2011-07-19 15:42 8421.jQuery得到用户IP: $.ge ... -
10大Ajax开发守则
2011-06-08 14:14 7681.前、端后都要做好安全的把关工作不能单靠前端做安全验证工作, ... -
Asp.net前台调后台方法
2011-05-30 16:51 1520 这个当然不用说大家都知道的一种就是ajax ... -
jQuery中常用的函数方法汇总
2011-05-23 00:16 777事件处理 ready(fn) 代 ... -
jquery选择器,过滤器介绍
2011-05-19 19:20 886一、JQuery与JavaScript 1.Jav ... -
jquery常用过滤选择器
2011-05-19 19:18 726过滤选择器主要 ... -
jquery函数
2011-05-18 23:25 675函数:after(content)功能:在每个匹配的元素后面添 ...
相关推荐
描述中提到的“dbgrideh 实现有条件合并单元格的例子”意味着我们将探讨如何利用DBGridEh控件的特性来有条件地合并单元格。DBGridEh 4.2是一个较新的版本,可能包含了针对单元格合并的优化和改进。 实现DBGridEh有...
在探讨“DataGridView合并单元格(纵向合并及横向合并)”这一主题时,我们首先需要理解DataGridView控件在Windows Forms中的重要性以及它如何为数据展示提供灵活且强大的功能。DataGridView是一个用于显示表格数据...
本示例将深入讲解如何利用NPOI库在Word文档中合并单元格,这对于创建报表、表格和其他格式化的文档非常有用。 NPOI是.NET平台上的一个强大的工具,它可以读取和写入Microsoft Office格式的文件。在Word处理方面,...
在jasperReport中,动态合并单元格是一项重要的功能,它能够根据数据的特性和需求灵活调整表格的布局,使得报告更加整洁且易于阅读。本示例将详细介绍如何在jasperReport中实现动态合并单元格。 首先,我们需要了解...
在某些情况下,为了更好地组织数据或突出显示特定信息,我们可能需要合并单元格。例如,当有重复的数据需要汇总时,或者想要创建带有表头的复杂布局时,合并单元格就显得尤为重要。 实现GridControl的单元格合并,...
EasyExcel-合并单元格技术详解 EasyExcel 是一个功能强大的 Excel 处理库,提供了许多便捷的 API 来处理 Excel 文件。在实际应用中,我们经常需要合并单元格,以便更好地展示数据。在本文中,我们将详细介绍如何...
本篇文章将深入探讨如何在GridControl中实现横向合并单元格以及字体自动换行的功能。 一、横向合并单元格 1. GridControl的合并单元格功能允许用户在显示数据时合并相邻的列,从而提高数据的可读性和美观度。在...
jxls2.0支持合并单元格和合并单元格模板写入数据,jar包里已经包含了pom.xml,可以自行解压方便上传到maven私服,这种方式会带上依赖,否则要一个个手动添加依赖.pom在jar包里jxls-core\2.0\jxls-core-2.0\META-INF\...
### POI 获取合并单元格详解 #### 一、概述 Apache POI 是一个流行的 Java 库,用于处理 Microsoft Office 格式的文档,如 Word、Excel 和 PowerPoint。在本篇文章中,我们将详细介绍如何使用 POI 处理 Excel 文件...
当需要在表格中展示具有层次结构或汇总信息的数据时,合并单元格功能就显得尤为重要。本篇文章将深入探讨如何在C#的`DataGridView`中实现单元格的合并,以增强数据展示的效果。 首先,我们需要理解`DataGridView`的...
### Excel计算合并单元格所占行数 #### 知识点概述 在Excel中处理大量数据时,常常需要对合并单元格进行各种操作,比如计算它们所占据的行数。这种需求常见于需要统计每组数据的具体行数,或者是在进行数据分析时...
在探讨“poi读取合并单元格帮助类”的知识点时,我们首先需要理解Apache POI库在Java中的作用以及如何处理Excel文件中的合并单元格。Apache POI是一个开源的API,它允许程序创建、修改和显示Microsoft Office格式的...
在标准的Datagrid中,合并单元格通常涉及到对行和列的范围进行设置。在WPF中,可以通过自定义控件或扩展Datagrid的默认行为来实现复杂的合并功能。描述中的"支持位置拖动、列宽度拖动"意味着这个实现还考虑了用户...
在这个“vue-easytable合并单元格”的主题下,我们将深入探讨如何利用Vue Easytable实现表格中的单元格合并。 在传统的HTML表格中,合并单元格通常使用`<td>`的`colspan`和`rowspan`属性来完成,但在Vue Easytable...
"layui table合并单元格.zip" 这个压缩包正是提供了关于如何在layui的表格中实现单元格合并的示例和资源。 首先,"layui table.txt" 文件可能包含了layui表格组件的基础用法和API介绍。layui的表格组件支持动态加载...
标题中的“动态的合并单元格”指的是在编程中实现表格(如GridView)中单元格的动态合并功能。这种技术常用于数据展示,特别是在处理分类或分组数据时,可以更清晰地呈现信息结构。描述中提到,通过这种方法,编程...
下面是如何创建一个合并单元格的示例: ```xml , RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}" Visibility="{Binding Path=Column1, Converter={StaticResource ...
在Excel中,合并单元格意味着多个相邻的单元格被合并成一个大的单元格,其内容占据合并后的所有空间。在Java中使用Apache POI进行操作,我们需要使用`XSSFWorkbook`(对于.xlsx文件)或`HSSFWorkbook`(对于.xls文件...
标题"datagridview横向合并单元格"涉及到的是如何在`DataGridView`中实现列的合并,这在展示某些特定类型的数据时非常有用,比如汇总信息或者创建带有标题的复合单元格。下面将详细阐述`DataGridView`的列合并以及...