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 相关文章推荐
基于JQuery的访问WebService的代码(可访问Java[Xfire])
Nov 19 Javascript
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
Apr 15 Javascript
jqplot通过ajax动态画折线图的方法及思路
Dec 08 Javascript
jQuery$命名冲突怎么办如何解决
Jan 16 Javascript
深入剖析JavaScript编程中的对象概念
Oct 21 Javascript
理解javascript函数式编程中的闭包(closure)
Mar 08 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
May 30 Javascript
javascript中new Array()和var arr=[]用法区别
Dec 01 Javascript
详解javascript中的变量提升和函数提升
May 24 Javascript
图文讲解vue的v-if使用方法
Feb 11 Javascript
JavaScript一元正号运算符示例代码
Jun 30 Javascript
小程序实现左滑删除的效果的实例代码
Oct 19 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
一首老MP3,致敬WAR3经典
2021/03/08 魔兽争霸
php操作(删除,提取,增加)zip文件方法详解
2015/03/12 PHP
php array_multisort 对数组进行排序详解及实例代码
2016/10/27 PHP
PHP符合PSR编程规范的实例分享
2016/12/21 PHP
一个js拖拽的效果类和dom-drag.js浅析
2010/07/17 Javascript
JavaScript 原型学习总结
2010/10/29 Javascript
jqeury eval将字符串转换json的方法
2011/01/20 Javascript
当json键为数字时的取值方法解析
2013/11/15 Javascript
实现51Map地图接口(示例代码)
2013/11/22 Javascript
asp.net刷新本页面的六种方法总结
2014/01/07 Javascript
jQuery旋转插件jqueryrotate用法详解
2016/10/13 Javascript
js实现tab切换效果
2017/02/16 Javascript
微信小程序学习之数据处理详解
2017/07/05 Javascript
angular2 ng2 @input和@output理解及示例
2017/10/10 Javascript
JS计算两个时间相差分钟数的方法示例
2018/01/10 Javascript
jQuery轮播图实例详解
2018/08/15 jQuery
vue发送ajax请求详解
2018/10/09 Javascript
详解Vue中watch对象内属性的方法
2019/02/01 Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
2019/02/22 Javascript
JS实现的简单tab切换功能完整示例
2019/06/20 Javascript
简单了解JS打开url的方法
2020/02/21 Javascript
JavaScript多种图形实现代码实例
2020/06/28 Javascript
解决vue字符串换行问题(绝对管用)
2020/08/06 Javascript
vue.js click点击事件获取当前元素对象的操作
2020/08/07 Javascript
wxPython事件驱动实例详解
2014/09/28 Python
解决python2.7 查询mysql时出现中文乱码
2016/10/09 Python
python中ImageTk.PhotoImage()不显示图片却不报错问题解决
2018/12/06 Python
python matplotlib库绘制条形图练习题
2019/08/10 Python
python实现文件批量编码转换及注意事项
2019/10/14 Python
python实点云分割k-means(sklearn)详解
2020/05/28 Python
python实现粒子群算法
2020/10/15 Python
加拿大专业美发产品购物网站:Chatters
2021/02/28 全球购物
科学发展观活动总结
2014/08/28 职场文书
党员创先争优心得体会
2014/09/11 职场文书
大学生国家助学金感谢信
2015/01/23 职场文书
Python打包exe时各种异常处理方案总结
2021/05/18 Python