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 相关文章推荐
JQueryEasyUI datagrid框架的基本使用
Apr 08 Javascript
JS基于面向对象实现的选项卡效果示例
Dec 20 Javascript
Angularjs 动态改变title标题(兼容ios)
Dec 29 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
Mar 08 Javascript
Vue页面跳转动画效果的实现方法
Sep 23 Javascript
vuex实现及简略解析(小结)
Mar 01 Javascript
layer.confirm()右边按钮实现href的例子
Sep 27 Javascript
重置Redux的状态数据的方法实现
Nov 18 Javascript
js的Object.assign用法示例分析
Mar 05 Javascript
JavaScript函数重载操作实例浅析
May 02 Javascript
基于Element封装一个表格组件tableList的使用方法
Jun 29 Javascript
Javascript Symbol原理及使用方法解析
Oct 22 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删除特定数组内容并且重建数组索引的方法.
2011/03/25 PHP
Codeigniter实现智能裁剪图片的方法
2014/06/12 PHP
destoon会员注册提示“数据校验失败(2)”解决方法
2014/06/21 PHP
PHP编写RESTful接口的方法
2016/02/21 PHP
PHP 中使用explode()函数切割字符串为数组的示例
2017/05/06 PHP
php 使用html5 XHR2实现上传文件与进度显示功能示例
2020/03/03 PHP
Thinkphp5框架中引入Markdown编辑器操作示例
2020/06/03 PHP
一个js实现的所谓的滑动门
2007/05/23 Javascript
jQuery MD5加密实现代码
2010/03/15 Javascript
JavaScript prototype属性深入介绍
2012/11/27 Javascript
jquery实现的3D旋转木马特效代码分享
2015/08/25 Javascript
学习使用grunt来打包JavaScript和CSS程序的教程
2016/01/04 Javascript
使用jQuery制作浮动工具栏的实例分享
2016/05/13 Javascript
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
2016/08/02 Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
2016/10/11 Javascript
jquery validation验证表单插件
2017/01/07 Javascript
jQuery命名空间与闭包用法示例
2017/01/12 Javascript
vue.js 获取当前自定义属性值
2017/06/01 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
2017/10/26 Javascript
js防抖和节流的深入讲解
2018/12/06 Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
2020/08/11 Javascript
[01:10:58]KG vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
使用Python脚本操作MongoDB的教程
2015/04/16 Python
Python中的rfind()方法使用详解
2015/05/19 Python
Python实现截屏的函数
2015/07/26 Python
Python中用字符串调用函数或方法示例代码
2017/08/04 Python
浅谈python 里面的单下划线与双下划线的区别
2017/12/01 Python
Python API 操作Hadoop hdfs详解
2020/06/06 Python
用css3写出气球样式的示例代码
2017/09/11 HTML / CSS
利物浦足球俱乐部官方商店(美国):Liverpool FC US
2019/10/09 全球购物
酒店前厅员工辞职信
2014/01/08 职场文书
工作决心书
2014/03/11 职场文书
请假条标准格式规范
2014/04/10 职场文书
食品委托检验协议书范本
2014/09/12 职场文书
详解Python描述符的工作原理
2021/06/11 Python
Python使用OpenCV实现虚拟缩放效果
2022/02/28 Python