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对象的比较
Feb 26 Javascript
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
Jul 17 Javascript
快速使用Bootstrap搭建传送带
May 06 Javascript
Select2.js下拉框使用小结
Oct 24 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
Dec 28 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
vue实现动态添加数据滚动条自动滚动到底部的示例代码
Jul 06 Javascript
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
vue引入微信sdk 实现分享朋友圈获取地理位置功能
Jul 04 Javascript
微信小程序错误this.setData报错及解决过程
Sep 18 Javascript
vue远程加载sfc组件思路详解
Dec 25 Javascript
如何编写一个 Webpack Loader的实现
Oct 18 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
十大催泪虐心动漫电影,有几部你还没看
2020/03/04 日漫
php结合表单实现一些简单功能的例子
2011/06/04 PHP
php 数组字符串搜索array_search技巧
2016/07/05 PHP
来自国外的14个图片放大编辑的jQuery插件整理
2010/10/20 Javascript
简单的jquery左侧导航栏和页面选中效果
2014/08/21 Javascript
js实现iframe跨页面调用函数的方法
2014/12/13 Javascript
Javascript基础教程之函数对象和属性
2015/01/18 Javascript
JS时间特效最常用的三款
2015/08/19 Javascript
jQuery 获取多选框的值及多选框中文的函数
2016/05/16 Javascript
js验证框架实现代码分享
2016/05/18 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
2016/10/26 Javascript
JS 中LocalStorage和SessionStorage的使用
2017/08/17 Javascript
Vue响应式原理深入解析及注意事项
2017/12/11 Javascript
vue页面加载闪烁问题的解决方法
2018/03/28 Javascript
Vue项目数据动态过滤实践及实现思路
2018/09/11 Javascript
详解适配器在JavaScript中的体现
2018/09/28 Javascript
解决vue-router路由拦截造成死循环问题
2020/08/05 Javascript
python实现的简单抽奖系统实例
2015/05/22 Python
Django与遗留的数据库整合的方法指南
2015/07/24 Python
Python3.6使用tesseract-ocr的正确方法
2018/10/17 Python
Python3简单实现串口通信的方法
2019/06/12 Python
基于Django实现日志记录报错信息
2019/12/17 Python
python matplotlib 绘图 和 dpi对应关系详解
2020/03/14 Python
html5中valid、invalid、required的定义
2014/02/21 HTML / CSS
美国网上鞋城:Shoeline.com
2016/11/17 全球购物
ZINVO手表官网:男士和女士手表
2019/03/10 全球购物
华为智利官方商店:Huawei Chile
2020/05/09 全球购物
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的
2015/07/24 面试题
在校生汽车维修实习自我鉴定
2013/09/19 职场文书
资产经营总监岗位职责
2013/12/04 职场文书
三好学生自我鉴定
2013/12/17 职场文书
开工典礼策划方案
2014/05/23 职场文书
市级绿色学校申报材料
2014/08/25 职场文书
《领导干部从政道德启示录》学习心得体会
2016/01/20 职场文书
python基于opencv批量生成验证码的示例
2021/04/28 Python
TypeScript实用技巧 Nominal Typing名义类型详解
2022/09/23 Javascript