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 相关文章推荐
验证用户是否修改过页面的数据的实现方法
Sep 26 Javascript
通过javascript把图片转化为字符画
Oct 24 Javascript
js中继承的几种用法总结(apply,call,prototype)
Dec 26 Javascript
深入理解javascript的执行顺序
Apr 04 Javascript
javascript基本类型详解
Nov 28 Javascript
理解jquery事件冒泡
Jan 03 Javascript
JS动态加载脚本并执行回调操作
Aug 24 Javascript
node文字生成图片的示例代码
Oct 26 Javascript
利用nvm管理多个版本的node.js与npm详解
Nov 02 Javascript
JavaScript实现AOP详解(面向切面编程,装饰者模式)
Dec 19 Javascript
bootstrap-table formatter 使用vue组件的方法
May 09 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
Aug 11 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
phpinfo 系统查看参数函数代码
2009/06/05 PHP
php无限分类使用concat如何实现
2015/11/05 PHP
轻松掌握php设计模式之访问者模式
2016/09/23 PHP
php微信开发之自定义菜单实现
2016/11/18 PHP
Javascript实现的类似Google的Div拖动效果代码
2011/08/09 Javascript
jQuery UI Autocomplete 体验分享
2012/02/14 Javascript
jQuery插件windowScroll实现单屏滚动特效
2015/07/14 Javascript
ionic实现滑动的三种方式
2016/08/27 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
2017/10/12 Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
2017/12/20 Javascript
vue使用iframe嵌入网页的示例代码
2020/06/09 Javascript
详解vue填坑之解决部分浏览器不支持pushState方法
2018/07/12 Javascript
js比较两个单独的数组或对象是否相等的实例代码
2019/04/28 Javascript
React优化子组件render的使用
2019/05/12 Javascript
layer.open 获取不到表单信息的解决方法
2019/09/26 Javascript
Django自定义分页与bootstrap分页结合
2021/02/22 Python
解决Linux系统中python matplotlib画图的中文显示问题
2017/06/15 Python
Python内置函数—vars的具体使用方法
2017/12/04 Python
python实现名片管理系统
2018/11/29 Python
Python程序包的构建和发布过程示例详解
2019/06/09 Python
使用pygame写一个古诗词填空通关游戏
2019/12/03 Python
查看jupyter notebook每个单元格运行时间实例
2020/04/22 Python
keras多显卡训练方式
2020/06/10 Python
python实现批量命名照片
2020/06/18 Python
Python WebSocket长连接心跳与短连接的示例
2020/11/24 Python
仿CSDN Blog返回页面顶部功能实现原理及代码
2013/06/30 HTML / CSS
一文彻底解决HTML5页面中长按保存图片功能
2019/06/10 HTML / CSS
英国日常交易网站:Wowcher
2018/09/04 全球购物
市场营销毕业生自荐信
2013/11/23 职场文书
财务内勤岗位职责
2014/04/17 职场文书
演讲稿的写法
2014/05/19 职场文书
人与自然观后感
2015/06/16 职场文书
毕业感言怎么写
2015/07/31 职场文书
Nginx源码编译安装过程记录
2021/11/17 Servers
CSS中实现动画效果-附案例
2022/02/28 HTML / CSS
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
2022/12/24 HTML / CSS