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 相关文章推荐
javascript innerHTML使用分析
Dec 03 Javascript
javascript获取网页中指定节点的父节点、子节点的方法小结
Apr 24 Javascript
得到form下的所有的input的js代码
Nov 07 Javascript
js事件监听机制(事件捕获)总结
Aug 08 Javascript
深入浅析JavaScript中对事件的三种监听方式
Sep 29 Javascript
20分钟轻松创建自己的Bootstrap站点
May 12 Javascript
AngularJS延迟加载html template
Jul 27 Javascript
js转html实体的方法
Sep 27 Javascript
单击按钮发送验证码,出现倒计时的简单实例
Mar 17 Javascript
浅谈Vue数据绑定的原理
Jan 08 Javascript
OpenLayers3实现鼠标移动显示坐标
Sep 25 Javascript
vue如何使用rem适配
Feb 06 Vue.js
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
PHP生成sitemap.xml地图函数
2013/11/13 PHP
php验证邮箱和ip地址最简单方法汇总
2015/10/30 PHP
php curl常用的5个经典例子
2017/01/20 PHP
几个有趣的Javascript Hack
2010/07/24 Javascript
浏览器加载、渲染和解析过程黑箱简析
2012/11/29 Javascript
对于Form表单reset方法的新认识
2014/03/05 Javascript
javascript中eval解析JSON字符串
2016/02/27 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
2016/08/24 Javascript
tab栏切换原理
2017/03/22 Javascript
JS库中的Particles.js在vue上的运用案例分析
2017/09/13 Javascript
Vue.JS项目中5个经典Vuex插件
2017/11/28 Javascript
axios全局请求参数设置,请求及返回拦截器的方法
2018/03/05 Javascript
解决angularJS中input标签的ng-change事件无效问题
2018/09/13 Javascript
Node.js 的 GC 机制详解
2019/06/03 Javascript
jQuery实现可编辑的表格
2019/12/11 jQuery
django简单的前后端分离的数据传输实例 axios
2020/05/18 Javascript
Vue清除定时器setInterval优化方案分享
2020/07/21 Javascript
vue+swiper实现左右滑动的测试题功能
2020/10/30 Javascript
python根据出生日期获得年龄的方法
2015/03/31 Python
django1.11.1 models 数据库同步方法
2018/05/30 Python
Windows 8.1 64bit下搭建 Scrapy 0.22 环境
2018/11/18 Python
Python实现字典排序、按照list中字典的某个key排序的方法示例
2018/12/18 Python
Python Datetime模块和Calendar模块用法实例分析
2019/04/15 Python
Python 正则表达式 re.match/re.search/re.sub的使用解析
2019/07/22 Python
Python下使用Trackbar实现绘图板
2020/10/27 Python
Python约瑟夫生者死者小游戏实例讲解
2021/01/04 Python
突袭HTML5之Javascript API扩展2—地理信息服务及地理位置API学习
2013/01/31 HTML / CSS
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法
2016/03/22 HTML / CSS
乐观大学生的自我评价
2014/01/10 职场文书
金融专业大学生职业生涯规划范文
2014/01/16 职场文书
法律六进活动方案
2014/03/13 职场文书
地理教师岗位职责
2014/03/16 职场文书
英语教研活动总结
2014/07/02 职场文书
教师工作失职检讨书
2014/09/18 职场文书
小学运动会通讯稿
2015/07/18 职场文书
信息简报范文
2015/07/21 职场文书