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技术-屏蔽类
Aug 15 Javascript
Extjs Ajax 乱码问题解决方案
Apr 15 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
Aug 06 Javascript
JS获取地址栏参数的小例子
Aug 23 Javascript
上传文件返回的json数据会被提示下载问题解决方案
Dec 03 Javascript
jquery.validate使用详解
Jun 02 Javascript
使用vue.js编写蓝色拼图小游戏
Mar 17 Javascript
原生JS发送异步数据请求
Jun 08 Javascript
浅谈react前后端同构渲染
Sep 20 Javascript
axios全局请求参数设置,请求及返回拦截器的方法
Mar 05 Javascript
JS实现json对象数组按对象属性排序操作示例
May 18 Javascript
vue实现PC端分辨率适配操作
Aug 03 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
全国FM电台频率大全 - 16 河南省
2020/03/11 无线电
浅谈PHP 闭包特性在实际应用中的问题
2009/10/30 PHP
在IIS下安装PHP扩展的方法(超简单)
2017/04/10 PHP
简单实现php上传文件功能
2017/09/21 PHP
用Javascript实现UTF8编码转换成gb2312编码
2006/12/22 Javascript
jqeury eval将字符串转换json的方法
2011/01/20 Javascript
使用js检测浏览器是否支持html5中的video标签的方法
2014/03/12 Javascript
JavaScript Array对象扩展indexOf()方法
2014/05/09 Javascript
加随机数引入脚本不让浏览器读取缓存
2014/09/04 Javascript
AngularJS基础学习笔记之表达式
2015/05/10 Javascript
JS阻止事件冒泡行为和闭包的方法
2016/06/16 Javascript
用js动态添加html元素,以及属性的简单实例
2016/07/19 Javascript
AngularJS ng-style中使用filter
2016/09/21 Javascript
微信小程序 Button 组件详解及简单实例
2017/01/10 Javascript
原生js实现新闻列表展开/收起全文功能
2017/01/20 Javascript
js实现随机点名小功能
2017/08/17 Javascript
详解如何让InstantClick兼容MathJax、百度统计等
2017/09/12 Javascript
webpack 打包压缩js和css的方法示例
2018/03/20 Javascript
nodejs连接mysql数据库及基本知识点详解
2018/03/20 NodeJs
如何提升vue.js中大型数据的性能
2019/06/21 Javascript
vue微信分享插件使用方法详解
2020/02/18 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
2020/07/31 Javascript
JavaScript实现移动小精灵的案例代码
2020/12/12 Javascript
[14:25]教你分分钟做大人:主宰(HEROS)
2014/12/08 DOTA
python 处理dataframe中的时间字段方法
2018/04/10 Python
python实现比较类的两个instance(对象)是否相等的方法分析
2019/06/26 Python
python自动生成证件号的方法示例
2021/01/14 Python
萨克斯第五大道精品百货店: Saks Fifth Avenue
2017/04/28 全球购物
机械设计毕业生自荐信
2014/02/02 职场文书
2014年情人节活动方案
2014/02/16 职场文书
在职证明书范本(2014新版)
2014/09/25 职场文书
交流会主持词
2015/07/02 职场文书
2015双创工作总结
2015/07/24 职场文书
网络研修随笔感言
2015/11/18 职场文书
民政局2016年“六一”儿童节慰问活动总结
2016/04/06 职场文书
java多态注意项小结
2021/10/16 Java/Android