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 相关文章推荐
利用div+jquery自定义滚动条样式的2种方法
Jul 18 Javascript
Jquery 点击按钮自动高亮实现原理及代码
Apr 25 Javascript
React Native实现简单的登录功能(推荐)
Sep 19 Javascript
javascript实现的上下无缝滚动效果
Sep 19 Javascript
详解JavaScript常量定义
Jan 03 Javascript
js实现增加数字显示的环形进度条效果
Feb 05 Javascript
基于JS实现翻书效果的页面切换样式
Feb 16 Javascript
vue中的计算属性的使用和vue实例的方法示例
Dec 04 Javascript
js指定日期增加指定月份的实现方法
Dec 19 Javascript
详解js获取video任意时间的画面截图
Apr 17 Javascript
微信小程序判断页面是否从其他页面返回的实例代码
Jul 03 Javascript
JavaScript实现简单的图片切换功能(实例代码)
Apr 10 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
编写PHP的安全策略
2006/10/09 PHP
PHP设计聊天室步步通
2006/10/09 PHP
PHP的分页功能
2007/03/21 PHP
php 常用算法和时间复杂度
2013/07/01 PHP
yii操作session实例简介
2014/07/31 PHP
js实现图片轮换效果代码
2013/04/16 Javascript
原生js和jquery中有关透明度设置的相关问题
2014/01/08 Javascript
js+jquery实现图片裁剪功能
2015/01/02 Javascript
JavaScript使用pop方法移除数组最后一个元素用法实例
2015/04/06 Javascript
轻松掌握JavaScript中介者模式
2016/08/26 Javascript
jQuery css() 方法动态修改CSS属性
2016/09/25 Javascript
Javascript农历与公历相互转换的简单实例
2016/10/09 Javascript
jquery mobile实现可折叠的导航按钮
2017/03/11 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
2018/02/06 Javascript
vue父组件点击触发子组件事件的实例讲解
2018/02/08 Javascript
jQuery替换节点元素的操作方法
2018/03/18 jQuery
vue-router动态设置页面title的实例讲解
2018/08/30 Javascript
ios设备中angularjs无法改变页面title的解决方法
2018/09/13 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
2018/12/13 Javascript
读懂CommonJS的模块加载
2019/04/19 Javascript
小程序Request的另类用法详解
2019/08/09 Javascript
利用原生JS实现欢乐水果机小游戏
2020/04/23 Javascript
element el-table表格的二次封装实现(附表格高度自适应)
2021/01/19 Javascript
Python单例模式实例分析
2015/01/14 Python
Python3.X 线程中信号量的使用方法示例
2017/07/24 Python
Python切片索引用法示例
2018/05/15 Python
Python reshape的用法及多个二维数组合并为三维数组的实例
2020/02/07 Python
python 解决tqdm模块不能单行显示的问题
2020/02/19 Python
新加坡网上花店:FlowerAdvisor新加坡
2018/10/05 全球购物
美体小铺奥地利官方网站:The Body Shop奥地利
2019/04/11 全球购物
be2台湾单身男女交友:全球网路婚姻介绍的领导品牌
2019/10/11 全球购物
庆八一活动方案
2014/01/25 职场文书
Mysql中存储引擎的区别及比较
2021/06/04 MySQL
react 路由Link配置详解
2021/11/11 Javascript
排查并解决MySQL生产库内存使用率高的报警
2022/04/11 MySQL
Redis实现一个账号只能登录一个设备
2022/04/19 Redis