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中的数组的sort方法使用示例
Jan 22 Javascript
在JavaScript中操作时间之setYear()方法的使用
Jun 12 Javascript
JavaScript编写简单的计算器
Nov 25 Javascript
Mvc提交表单的四种方法全程详解
Aug 10 Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
Nov 30 Javascript
JavaScript常见的五种数组去重的方式
Dec 15 Javascript
Javascript for in的缺陷总结
Feb 03 Javascript
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
微信小程序实现树莓派(raspberry pi)小车控制
Feb 12 Javascript
基于canvas实现手写签名(vue)
May 21 Javascript
node.js通过url读取文件
Oct 16 Javascript
JS前端轻量fabric.js系列物体基类
Aug 05 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实现读取和编写XML DOM代码
2010/04/07 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
json 实例详细说明教程
2009/10/31 Javascript
js中关于new Object时传参的一些细节分析
2011/03/13 Javascript
javascript学习笔记(三)显示当时时间的代码
2011/04/08 Javascript
游览器中javascript的执行过程(图文)
2012/05/20 Javascript
jQuery-Tools-overlay 使用介绍
2012/07/14 Javascript
img onload事件绑定各浏览器均可执行
2012/12/19 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
2013/06/26 Javascript
jQuery自动切换/点击切换选项卡效果的小例子
2013/08/12 Javascript
window.location.href IE下跳转失效的解决方法
2014/03/27 Javascript
一个支付页面DEMO附截图
2014/07/22 Javascript
JS控制伪元素的方法汇总
2016/04/06 Javascript
将html页面保存成图片,图片写入pdf的实现方法(推荐)
2016/09/17 Javascript
JavaScript每天必学之基础知识
2016/09/17 Javascript
jQuery实现滚动效果
2017/11/17 jQuery
jQuery实现碰到边缘反弹的动画效果
2018/02/24 jQuery
如何在微信小程序里面退出小程序的方法
2019/04/28 Javascript
VUE中使用HTTP库Axios方法详解
2020/02/05 Javascript
Vue Router中应用中间件的方法
2020/08/06 Javascript
跨平台python异步回调机制实现和使用方法
2013/11/26 Python
Python列表生成式与生成器操作示例
2018/08/01 Python
零基础使用Python读写处理Excel表格的方法
2019/05/02 Python
pycharm通过anaconda安装pyqt5的教程
2020/03/24 Python
美国在线印刷公司:PsPrint
2017/10/12 全球购物
Columbia Sportswear法国官网:全球户外品牌
2020/09/25 全球购物
详解如何解决使用JSON.stringify时遇到的循环引用问题
2021/03/23 Javascript
出纳员岗位责任制
2014/02/11 职场文书
学生周末长期请假条
2014/02/15 职场文书
《我为你骄傲》教学反思
2014/02/20 职场文书
品牌推广策划方案
2014/05/28 职场文书
商务邀请函
2015/01/30 职场文书
2015年医院护理部工作总结
2015/04/23 职场文书
pytest进阶教程之fixture函数详解
2021/03/29 Python
教你怎么用python爬取爱奇艺热门电影
2021/05/20 Python
Python+Matplotlib+LaTeX玩转数学公式
2022/02/24 Python