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 相关文章推荐
js检测客户端不是firefox则提示下载
Apr 07 Javascript
Javascript无阻塞加载具体方式
Jun 28 Javascript
Jquery 模板数据绑定插件的使用方法详解
Jul 08 Javascript
Javascript中的包装类型介绍
Apr 02 Javascript
React如何利用相对于根目录进行引用组件详解
Oct 09 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
Mar 06 Javascript
Vue中&quot;This dependency was not found&quot;问题的解决方法
Jun 19 Javascript
JavaScript引用类型RegExp基本用法详解
Aug 09 Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
Dec 28 Javascript
微信小程序如何获取群聊的openGid以及名称详解
Jul 17 Javascript
JavaScript中的惰性载入函数及优势
Feb 18 Javascript
游戏开发中如何使用CocosCreator进行音效处理
Apr 14 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
Symfony2创建基于域名的路由相关示例
2016/11/14 PHP
Zend Framework校验器Zend_Validate用法详解
2016/12/09 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
实例讲解PHP表单处理
2019/02/15 PHP
Firefox下提示illegal character并出现乱码的原因
2010/03/25 Javascript
Javascript技巧之不要用for in语句对数组进行遍历
2010/10/20 Javascript
juqery 学习之三 选择器 层级 基本
2010/11/25 Javascript
JQUERY设置IFRAME的SRC值的代码
2010/11/30 Javascript
Angular 2.x学习教程之结构指令详解
2017/05/25 Javascript
详解微信第三方小程序代开发
2017/06/23 Javascript
安装Node.js并启动本地服务的操作教程
2018/05/12 Javascript
JS实现图片旋转动画效果封装与使用示例
2018/07/09 Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
2019/01/15 Javascript
Layui实现数据表格默认全部显示(不要分页)
2019/10/26 Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
2020/02/09 Javascript
JavaScript实现旋转木马轮播图
2020/03/16 Javascript
为什么推荐使用JSX开发Vue3
2020/12/28 Vue.js
原生js实现下拉框选择组件
2021/01/20 Javascript
[01:38]【DOTA2亚洲邀请赛】Sumail——梦开始的地方
2017/03/03 DOTA
Python和perl实现批量对目录下电子书文件重命名的代码分享
2014/11/21 Python
Python正则表达式完全指南
2017/05/25 Python
Python实现查找字符串数组最长公共前缀示例
2019/03/27 Python
python 接口实现 供第三方调用的例子
2019/08/13 Python
Python FtpLib模块应用操作详解
2019/12/12 Python
使用tensorflow显示pb模型的所有网络结点方式
2020/01/23 Python
python实现字符串和数字拼接
2020/03/02 Python
Python叠加矩形框图层2种方法及效果
2020/06/18 Python
Python爬虫实现HTTP网络请求多种实现方式
2020/06/19 Python
python语言实现贪吃蛇游戏
2020/11/13 Python
台湾乐天市场:日本No.1的网路购物网站
2017/03/22 全球购物
美国汽车性能部件和赛车零件网站:Vivid Racing
2018/03/27 全球购物
经济与贸易专业应届生求职信
2013/11/19 职场文书
中学生演讲稿
2014/04/26 职场文书
2015年度员工自我评价范文
2015/03/11 职场文书
2019邀请函格式及范文
2019/05/20 职场文书
使用CSS自定义属性实现骨架屏效果
2022/06/21 HTML / CSS