javascript合并表格单元格实例代码


Posted in Javascript onJanuary 03, 2016

本文为大家介绍了一段来源于网络上的代码实例,能够合并单元格,下面和大家分享一下,希望能够给需要的朋友或多或少带来一定的帮助。
代码实例如下:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>表格单元格合并代码</title>
<script type="text/javascript"> 
function autoRowSpan(tb,row,col){ 
 var lastValue=""; 
 var value=""; 
 var pos=1; 
 for(var i=row;i<tb.rows.length;i++){ 
 value=tb.rows[i].cells[col].innerText; 
 if(lastValue==value){ 
  tb.rows[i].deleteCell(col); 
  tb.rows[i-pos].cells[col].rowSpan=tb.rows[i-pos].cells[col].rowSpan+1; 
  pos++; 
 }
 else{ 
  lastValue=value; 
  pos=1; 
 } 
 } 
} 
window.onload=function(){
 var tb=document.getElementById("tb");
 autoRowSpan(tb,0,0)
}
</script>
</head>
<body>
<table id="tb" border="1">
 <thead>
 <tr >
  <td>国家</td>
  <td>地区</td>
 </tr>
 </thead>
 <tr>
 <td>中国</td>
 <td>河南</td>
 </tr>
 <tr>
 <td>中国</td>
 <td>四川</td>
 </tr>
 <tr>
 <td>中国</td>
 <td>北京</td>
 </tr>
 <tr>
 <td>美国</td>
 <td>纽约</td>
 </tr>
 <tr>
 <td>美国</td>
 <td>洛杉矶</td>
 </tr>
 <tr>
 <td>英国</td>
 <td>伦敦</td>
 </tr>
</table>
</body>
</html>

在为大家分享一段:

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>合并表格</title> 
<script> 
/////////////////////////////////////////////// 
//功能:合并表格 
//参数:tb-需要合并的表格ID 
//参数:colLength--需要对前几列进行合并,比如, 
//想合并前两列,后面的数据列忽略合并,colLength应为2 
//缺省表示对全部列合并 
//data:2011.11.06 
/////////////////////////////////////////////// 
function uniteTable(tb,colLength){ 
//检查表格是否规整 
if(!checkTable(tb)) return; 
var i=0; 
var j=0; 
var rowCount=tb.rows.length; //行数 
var colCount=tb.rows[0].cells.length; //列数 
var obj1=null; 
var obj2=null; 
//为每个单元格命名 
for(i=0;i<rowCount;i++){ 
for(j=0;j<colCount;j++){ 
tb.rows[i].cells[j].id="tb__" + i.toString() + "_" + j.toString(); 
} 
} 
//逐列检查合并 
for(i=0;i<colCount;i++){ 
if(i==colLength) return; 
obj1=document.getElementById("tb__0_"+i.toString()) 
for(j=1;j<rowCount;j++){ 
obj2=document.getElementById("tb__"+j.toString()+"_"+i.toString()); 
if(obj1.innerText==obj2.innerText){ 
obj1.rowSpan++; 
obj2.parentNode.removeChild(obj2); 
}else{ 
obj1=document.getElementById("tb__"+j.toString()+"_"+i.toString()); 
} 
} 
} 
} 

///////////////////////////////////////// 
//功能:检查表格是否规整 
//参数:tb--需要检查的表格ID 
//data: 2011.11.06
///////////////////////////////////////// 
function checkTable(tb){ 
if(tb.rows.length==0) return false; 
if(tb.rows[0].cells.length==0) return false; 
for(var i=0;i<tb.rows.length;i++){ 
if(tb.rows[0].cells.length!=tb.rows[i].cells.length) return false; 
} 
return true; 
} 
</script> 
</head> 
<body> 
<table width="400" border="1" id="table1"> 
<tr> 
<td>a</td> 
<td>for</td> 
<td>100</td> 
<td>200</td>
<td>1</td> 
</tr> 
<tr> 
<td>a</td> 
<td>for</td> 
<td>100</td> 
<td>300</td> 
<td>2</td> 
</tr> 
<tr> 
<td>a</td> 
<td>if</td> 
<td>100</td> 
<td>200</td> 
<td>3</td> 
</tr> 
<tr> 
<td>a</td> 
<td>if</td> 
<td>300</td> 
<td>230</td> 
<td>4</td> 
</tr> 
<tr> 
<td>a</td> 
<td>if</td> 
<td>320</td> 
<td>230</td> 
<td>5</td> 
</tr> 
</table> 
<br><input type="button" value="合并表格" onClick="uniteTable(table1,4)"> 
</body> 
</html>

希望本文所述对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
js输出阴历、阳历、年份、月份、周示例代码
Jan 29 Javascript
修复bash漏洞的shell脚本分享
Dec 31 Javascript
js检测iframe是否加载完成的方法
Nov 26 Javascript
JavaScript 对象详细整理总结
Sep 29 Javascript
原生js实现返回顶部缓冲效果
Jan 18 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
Feb 22 Javascript
js仿微信公众平台打标签功能
Apr 08 Javascript
jQuery+PHP+Mysql实现抽奖程序
Apr 12 jQuery
原生JavaScript之es6中Class的用法分析
Feb 23 Javascript
vue+canvas实现移动端手写签名
May 21 Javascript
vue的webcamjs集成方式
Nov 16 Javascript
JavaScript文档对象模型DOM
Nov 20 Javascript
JS Array.slice 截取数组的实现方法
Jan 02 #Javascript
jquery实现简单的全选和反选功能
Jan 02 #Javascript
基于Javascript实现弹出页面效果
Jan 01 #Javascript
基于jQuery实现点击弹出层实例代码
Jan 01 #Javascript
基于jQuery实现返回顶部实例代码
Jan 01 #Javascript
详解JavaScript 中的 replace 方法
Jan 01 #Javascript
基于JavaScript实现定时跳转到指定页面
Jan 01 #Javascript
You might like
提问的智慧(2)
2006/10/09 PHP
深入理解用mysql_fetch_row()以数组的形式返回查询结果
2013/06/05 PHP
preg_match_all使用心得分享
2014/01/31 PHP
PHP中设置一个严格30分钟过期Session面试题的4种答案
2014/07/30 PHP
php防止网站被刷新的方法汇总
2014/12/01 PHP
[原创]PHPCMS遭遇会员投稿审核无效的解决方法
2017/01/11 PHP
基于php(Thinkphp)+jquery 实现ajax多选反选不选删除数据功能
2017/02/24 PHP
php实现网页端验证码功能
2017/07/11 PHP
php之可变函数的实例详解
2017/09/13 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
在JavaScript中使用inline函数的问题
2007/03/08 Javascript
jquery滚动条插件jScrollPane的使用介绍
2013/11/08 Javascript
JS取文本框中最小值的简单实例
2013/11/29 Javascript
Javascript动态引用CSS文件的2种方法介绍
2014/06/06 Javascript
js+css绘制颜色动态变化的圈中圈效果
2016/01/27 Javascript
Windows 系统下设置Nodejs NPM全局路径
2016/04/26 NodeJs
给easyui datebox扩展一个清空的实例
2016/11/09 Javascript
详解获取jq ul第一个li定位的四种解决方案
2016/11/23 Javascript
jQuery中DOM节点删除之empty与remove
2017/01/20 Javascript
详解AngularJS ng-class样式切换
2017/06/27 Javascript
nodejs开发微信小程序实现密码加密
2017/07/11 NodeJs
JavaScript键盘事件响应顺序详解
2019/09/30 Javascript
详解JavaScript数据类型和判断方法
2020/09/04 Javascript
详解Python3除法之真除法、截断除法和下取整对比
2019/05/23 Python
python操作kafka实践的示例代码
2019/06/19 Python
python 用 xlwings 库 生成图表的操作方法
2019/12/22 Python
python中count函数简单的实例讲解
2020/02/06 Python
Python3基于print打印带颜色字符串
2020/07/06 Python
利用CSS3伪元素实现逐渐发光的方格边框
2017/05/07 HTML / CSS
国际旅客访问北美最大的汽车租赁提供商:Alamo Rent A Car
2018/06/13 全球购物
什么是重载?CTS、CLS和CLR分别做何解释
2012/05/06 面试题
《夹竹桃》教学反思
2014/04/20 职场文书
2015年食堂工作总结报告
2015/04/23 职场文书
谢师宴学生致辞
2015/07/27 职场文书
如何书写民事调解协议书?
2019/06/25 职场文书
浅谈如何保证Mysql主从一致
2022/03/13 MySQL