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 相关文章推荐
HTML长文本截取含有HTML代码同样适用的两种方法
Jul 31 Javascript
js利用prototype调用Array的slice方法示例
Jun 09 Javascript
jQuery插件pagewalkthrough实现引导页效果
Jul 05 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
Aug 29 Javascript
Bootstrap CSS布局之列表
Dec 15 Javascript
vue-cli webpack 开发环境跨域详解
May 18 Javascript
使用layui实现树形结构的方法
Sep 20 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
Aug 05 Javascript
vue自动添加浏览器兼容前后缀操作
Aug 13 Javascript
js实现直播点击飘心效果
Aug 19 Javascript
js实现鼠标拖曳效果
Dec 30 Javascript
JavaScript 定时器详情
Nov 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
ThinkPHP中limit()使用方法详解
2016/04/19 PHP
PHP变量的作用范围实例讲解
2020/12/22 PHP
javascript replace方法与正则表达式
2008/02/19 Javascript
JQuery给元素添加/删除节点比如select
2013/04/02 Javascript
动态读取JSON解析键值对的方法
2014/06/03 Javascript
js中flexible.js实现淘宝弹性布局方案
2020/06/23 Javascript
javascript高级选择器querySelector和querySelectorAll全面解析
2016/04/07 Javascript
关于Javascript中defer和async的区别总结
2016/09/20 Javascript
使用Vue.js创建一个时间跟踪的单页应用
2016/11/28 Javascript
详解利用 Express 托管静态文件的方法
2017/09/18 Javascript
webpack中CommonsChunkPlugin详细教程(小结)
2017/11/09 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
2019/02/22 Javascript
微信小程序实现滑动翻页效果(完整代码)
2019/12/06 Javascript
node.JS事件机制与events事件模块的使用方法详解
2020/02/06 Javascript
JavaScript实现捕获鼠标坐标
2020/04/12 Javascript
easyUI 实现的后台分页与前台显示功能示例
2020/06/01 Javascript
[01:18]PWL开团时刻DAY4——圣剑与抢盾
2020/11/03 DOTA
python数字图像处理实现直方图与均衡化
2018/05/04 Python
python 自定义异常和异常捕捉的方法
2018/10/18 Python
python批量修改ssh密码的实现
2019/08/08 Python
Tensorflow累加的实现案例
2020/02/05 Python
浅谈python量化 双均线策略(金叉死叉)
2020/06/03 Python
pycharm 实现本地写代码,服务器运行的操作
2020/06/08 Python
Django通过设置CORS解决跨域问题
2020/11/26 Python
JOSEPH官网:英国奢侈时尚品牌
2018/01/31 全球购物
Hotels.com越南:酒店预订
2019/10/29 全球购物
下列程序在32位linux或unix中的结果是什么
2014/03/25 面试题
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的?
2013/02/17 面试题
模具专业自荐信
2014/05/29 职场文书
公共机构节能宣传周活动总结
2014/07/09 职场文书
单位婚育证明范本
2014/11/21 职场文书
2015年艾滋病防治工作总结
2015/05/22 职场文书
2016年小学感恩节活动总结
2016/04/01 职场文书
Python 用户输入和while循环的操作
2021/05/23 Python
5道关于python基础 while循环练习题
2021/11/27 Python
详解Alibaba Java诊断工具Arthas查看Dubbo动态代理类
2022/04/08 Java/Android