JS 实现Table相同行的单元格自动合并示例代码


Posted in Javascript onAugust 27, 2013

代码如下,可直接运行:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
<META NAME="Generator" CONTENT="EditPlus"> 
<META NAME="Author" CONTENT=""> 
<META NAME="Keywords" CONTENT=""> 
<META NAME="Description" CONTENT=""> 
</HEAD> 
<SCRIPT LANGUAGE="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; 
} 
} 
} </SCRIPT> 
<BODY onload="autoRowSpan(tb,0,0)"> 
<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>
Javascript 相关文章推荐
利用ASP发送和接收XML数据的处理方法与代码
Nov 13 Javascript
JS关键字球状旋转效果的实例代码
Nov 29 Javascript
jQuery往返城市和日期查询实例讲解
Oct 09 Javascript
jQuery使用$.ajax进行即时验证的方法
Dec 08 Javascript
详解JavaScript基于面向对象之继承实例
Dec 16 Javascript
jQuery遍历节点树方法分析
Sep 08 Javascript
JavaScript SHA-256加密算法详细代码
Oct 06 Javascript
JS实现滑动门效果的方法详解
Dec 19 Javascript
AngularJS基于factory创建自定义服务的方法详解
May 25 Javascript
JS设计模式之策略模式概念与用法分析
Feb 05 Javascript
简单了解vue 插值表达式Mustache
Jul 22 Javascript
vuex存取值和映射函数使用说明
Jul 24 Javascript
Javascript 浮点运算的问题分析与解决方法
Aug 27 #Javascript
js中点击空白区域时文本框与隐藏层的显示与影藏问题
Aug 26 #Javascript
关于IE中getElementsByClassName不能用的问题解决方法
Aug 26 #Javascript
关于Jquery操作Cookie取值错误的解决方法
Aug 26 #Javascript
jquery弹出框的用法示例(2)
Aug 26 #Javascript
jquery弹出框的用法示例(一)
Aug 26 #Javascript
jQuery快速上手:写jQuery与直接写JS的区别详细解析
Aug 26 #Javascript
You might like
冰滴咖啡制作步骤
2021/03/03 冲泡冲煮
详解WordPress开发中的get_post与get_posts函数使用
2016/01/04 PHP
PHP设计模式之装饰器模式定义与用法详解
2018/04/02 PHP
jquery简单的拖动效果实现原理及示例
2013/07/26 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
2014/02/12 Javascript
NodeJS制作爬虫全过程
2014/12/22 NodeJs
jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)
2020/03/30 Javascript
浅谈JavaScript的全局变量与局部变量
2016/06/10 Javascript
JS中正则表达式全局匹配模式 /g用法详解
2017/04/01 Javascript
大白话讲解JavaScript的Promise
2017/04/06 Javascript
对象不支持indexOf属性或方法的解决方法(必看)
2017/05/28 Javascript
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
2017/07/10 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
2017/07/23 Javascript
深入理解ES6学习笔记之块级作用域绑定
2017/08/19 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
2018/04/13 Javascript
NodeJS安装图文教程
2018/04/19 NodeJs
Vue项目安装插件并保存
2019/01/28 Javascript
JavaScript接口实现方法实例分析
2020/05/16 Javascript
[02:16]2018年度CS GO最具人气选手-完美盛典
2018/12/16 DOTA
Python写的Discuz7.2版faq.php注入漏洞工具
2014/08/06 Python
python获取远程图片大小和尺寸的方法
2015/03/26 Python
Python面向对象class类属性及子类用法分析
2018/02/02 Python
Python实现的redis分布式锁功能示例
2018/05/29 Python
python Flask 装饰器顺序问题解决
2018/08/08 Python
kali中python版本的切换方法
2019/07/11 Python
Python HTMLTestRunner可视化报告实现过程解析
2020/04/10 Python
详解Python IO口多路复用
2020/06/17 Python
python使用matplotlib:subplot绘制多个子图的示例
2020/09/24 Python
Python实现我的世界小游戏源代码
2021/03/02 Python
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
2021/03/17 Javascript
小学教育毕业生自荐信
2013/11/18 职场文书
茶叶生产计划书
2014/01/10 职场文书
人民调解员培训方案
2014/06/05 职场文书
房贷收入证明范本
2015/06/12 职场文书
就业证明函
2015/06/17 职场文书
战友聚会致辞
2015/07/28 职场文书