js控制table合并具体实现


Posted in Javascript onFebruary 20, 2014
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gbk" /> 
<title>无标题文档 </title> 
</head> <body> 
<table width="100%" border="1" cellspacing="0" cellpadding="0" id="tab"> 
<tr> 
<td rowspan="0">张三 </td> 
<td>男 </td> 
<td>22 </td> 
<td>数学 </td> 
<td>90 </td> 
</tr> 
<tr> 
<td rowspan="0">张三 </td> 
<td>男 </td> 
<td>22 </td> 
<td>数学 </td> 
<td>90 </td> 
</tr> 
<tr> 
<td rowspan="0">张三 </td> 
<td>女 </td> 
<td>22 </td> 
<td>语文 </td> 
<td>70 </td> 
</tr> 
<tr> 
<td rowspan="0">张三 </td> 
<td>女 </td> 
<td>22 </td> 
<td>英语 </td> 
<td>60 </td> 
</tr> 
<tr> 
<td rowspan="0">李四 </td> 
<td>女 </td> 
<td>22 </td> 
<td>数学 </td> 
<td>60 </td> 
</tr> 
<tr> 
<td rowspan="0">李四 </td> 
<td>女 </td> 
<td>19 </td> 
<td>语文 </td> 
<td>60 </td> 
</tr> 
<tr> 
<td rowspan="0">王五 </td> 
<td>男 </td> 
<td>19 </td> 
<td>英语 </td> 
<td>60 </td> 
</tr> 
</table> 
<script type="text/javascript"> 
window.onload = function(){ 
var tab = document.getElementById("tab"); 
var col =0; 
megercell(tab, col); 
megercell1(tab, col+1); 
for(var i=0; i<tab.rows.length; i++){ 
// alert(tab.rows[i].cells[0].getAttribute("rowspan")); 
} 
}; 

function megercell(tab, col){ 
count = 1; 
val = ""; 
for(var i=0; i<tab.rows.length; i++){ 
if(val == tab.rows[i].cells[col].innerHTML){ 
count++; 
}else{ 
if(count > 1){ 
from = i - count; 
tab.rows[from].cells[col].rowSpan = count; 
for(var j=from+1; j<i; j++){ 
tab.rows[j].cells[col].style.display = "none"; 
} 
count = 1; 
} 
val = tab.rows[i].cells[col].innerHTML; 
} 
} 
} 
function megercell1(tab, col){ 
count = 1; 
val = ""; 
var rowspan = 0; 
for(var i=0; i<tab.rows.length;){ 
rowspan = parseInt(tab.rows[i].cells[0].getAttribute("rowspan")); 
if(rowspan) 
{ 
for(var n = 0; n < rowspan; n++) 
{ 
if(val == tab.rows[i].cells[col].innerHTML){ 
count++; 
}else{ 
if(count > 1){ 
from = i - count; 
tab.rows[from].cells[col].rowSpan = count; 
for(var j=from+1; j<i; j++){ 
tab.rows[j].cells[col].style.display = "none"; 
} 
count = 1; 
} 
val = tab.rows[i].cells[col].innerHTML; 
} 
i++; 
} 
if(count > 1) 
{ 
from = i - count; 
alert(from +" "+ i +" "+ count); 
tab.rows[from].cells[col].rowSpan = count; 
for(var j=from+1; j<i; j++){ 
tab.rows[j].cells[col].style.display = "none"; 
} 
} 
count = 1; 
val = ""; 
} 
else 
{ 
i++; 
} 
} 
} 
</script> 
</body> 
</html>
Javascript 相关文章推荐
Extjs 几个方法的讨论
Jan 28 Javascript
jquery URL参数判断,确定菜单样式
May 31 Javascript
基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
Jul 26 Javascript
jquery+css实现的红色线条横向二级菜单效果
Aug 22 Javascript
jquery性能优化高级技巧
Aug 24 Javascript
JavaScript模块化开发之SeaJS
Dec 13 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
Mar 07 Javascript
JavaScript计算器网页版实现代码分享
Jul 15 Javascript
js实现会跳动的日历效果(完整实例)
Oct 18 Javascript
angularJS的radio实现单项二选一的使用方法
Feb 28 Javascript
vue-resource请求实现http登录拦截或者路由拦截的方法
Jul 11 Javascript
微信小程序图片右边加两行文字的代码
Apr 23 Javascript
js文件Cookie存取值示例代码
Feb 20 #Javascript
js中array的sort()方法使用介绍
Feb 20 #Javascript
javascript生成随机大小写字母的方法
Feb 20 #Javascript
将json对象转换为字符串的方法
Feb 20 #Javascript
javascript实现json页面分页实例代码
Feb 20 #Javascript
Jquery中的层次选择器与find()的区别示例介绍
Feb 20 #Javascript
页面加载完毕后滚动条自动滚动一定位置
Feb 20 #Javascript
You might like
Win7 64位系统下PHP连接Oracle数据库
2014/08/20 PHP
用 Composer构建自己的 PHP 框架之使用 ORM
2014/10/30 PHP
Docker 如何布置PHP开发环境
2016/06/21 PHP
PHP多进程通信-消息队列使用
2019/03/08 PHP
Avengerls vs KG BO3 第三场2.18
2021/03/10 DOTA
运用Windows XP附带的Msicuu.exe、Msizap.exe来彻底卸载顽固程序
2007/04/21 Javascript
基于NodeJS的前后端分离的思考与实践(五)多终端适配
2014/09/26 NodeJs
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
2015/03/01 Javascript
学习使用bootstrap3栅格系统
2016/04/12 Javascript
jQuery Mobile 触摸事件实例
2016/06/04 Javascript
jQuery简单设置文本框回车事件的方法
2016/08/01 Javascript
jQuery fadeOut 异步实例代码详解
2016/08/18 Javascript
javascript 利用arguments实现可变长参数
2016/11/21 Javascript
基于Vue实现timepicker
2017/04/25 Javascript
微信小程序开发中的疑问解答汇总
2017/07/03 Javascript
Node 自动化部署的方法
2017/10/17 Javascript
使用vue-router完成简单导航功能【推荐】
2018/06/28 Javascript
JavaScript解析机制与闭包原理实例详解
2019/03/08 Javascript
小程序实现上下移动切换位置
2019/09/23 Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
2020/02/01 jQuery
react国际化化插件react-i18n-auto使用详解
2020/03/31 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
2020/12/30 Vue.js
[12:21]VICI vs TNC (BO3)
2018/06/07 DOTA
Python实现设置windows桌面壁纸代码分享
2015/03/28 Python
python3.6连接MySQL和表的创建与删除实例代码
2017/12/28 Python
python正则表达式去除两个特殊字符间的内容方法
2018/12/24 Python
Python Django 前后端分离 API的方法
2019/08/28 Python
python 微信好友特征数据分析及可视化
2020/01/07 Python
HTML实现代码雨源码及效果示例
2020/02/25 HTML / CSS
房地产管理毕业生自荐信
2013/11/04 职场文书
应届毕业生个人自荐信范文
2013/11/30 职场文书
文明餐桌行动实施方案
2014/02/19 职场文书
《美丽的南沙群岛》教学反思
2014/04/27 职场文书
老公保证书
2015/01/17 职场文书
java基础——多线程
2021/07/03 Java/Android
使用Bandicam录制鼠标指针并附带点击声音,还可以添加点击动画效果
2022/04/11 数码科技