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 相关文章推荐
Javascript----文件操作
Jan 18 Javascript
Jquery 实现Tab效果 思路是js思路
Mar 02 Javascript
jQuery之折叠面板的深入解析
Jun 19 Javascript
javascript date格式化示例
Sep 25 Javascript
js 弹出新页面避免被浏览器、ad拦截的一种新方法
Apr 30 Javascript
node.js中的buffer.fill方法使用说明
Dec 14 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
Sep 02 Javascript
jQuery绑定事件的四种方式介绍
Oct 31 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
Jan 04 Javascript
vue制作toast组件npm包示例代码
Oct 29 Javascript
Ant Design的可编辑Tree的实现操作
Oct 31 Javascript
如何在JavaScript中等分数组的实现
Dec 13 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
php 中文字符入库或显示乱码问题的解决方法
2010/04/12 PHP
PHP PDOStatement对象bindpram()、bindvalue()和bindcolumn之间的区别
2014/11/20 PHP
PHP动态地创建属性和方法, 对象的复制, 对象的比较,加载指定的文件,自动加载类文件,命名空间
2016/05/06 PHP
在Laravel框架里实现发送邮件实例(邮箱验证)
2016/05/20 PHP
PhpStorm terminal无法输入命令的解决方法
2016/10/09 PHP
PHP简单实现防止SQL注入的方法
2018/03/13 PHP
PHP+Ajax实现的检测用户名功能简单示例
2019/02/12 PHP
javascript开发中因空格引发的错误
2010/11/08 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
2015/03/03 Javascript
jQuery实现鼠标划过展示大图的方法
2015/03/09 Javascript
Prototype框架详解
2015/11/25 Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
2015/12/03 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
2016/02/17 Javascript
node.js实现微信JS-API封装接口的示例代码
2017/09/06 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
2018/12/11 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
2019/04/10 Javascript
js实现简易拖拽的示例
2020/10/26 Javascript
从零学Python之入门(四)运算
2014/05/27 Python
Python网络爬虫实例讲解
2016/04/28 Python
python dict 字典 以及 赋值 引用的一些实例(详解)
2017/01/20 Python
Python求平面内点到直线距离的实现
2020/01/19 Python
浅谈基于Canvas的手绘风格图形库Rough.js
2018/03/19 HTML / CSS
navabi英国:设计师大码女装
2019/06/25 全球购物
如何执行一个shell程序
2012/11/23 面试题
设计毕业生简历中的自我评价
2013/10/01 职场文书
应届大学毕业生找工作的求职信范文
2013/11/29 职场文书
银行员工辞职信范文
2014/01/20 职场文书
给水工程专业毕业生自荐信
2014/01/28 职场文书
技能比武方案
2014/05/21 职场文书
大专生找工作自荐书
2014/06/10 职场文书
2015年教师学期工作总结
2015/04/30 职场文书
事业单位岗位说明书
2015/10/08 职场文书
《一面五星红旗》教学反思
2016/02/23 职场文书
导游词之新疆-喀纳斯
2019/10/10 职场文书
详解Python+OpenCV绘制灰度直方图
2022/03/22 Python
Nginx如何限制IP访问只允许特定域名访问
2022/07/23 Servers