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 相关文章推荐
JavaScript 无符号右移运算符
Apr 17 Javascript
基于jquery的代码显示区域自动拉长效果
Dec 07 Javascript
javascript创建和存储cookie示例
Jan 07 Javascript
JavaScript引用类型和基本类型详解
Jan 06 Javascript
webpack配置之后端渲染详解
Oct 26 Javascript
React Native使用Modal自定义分享界面的示例代码
Oct 31 Javascript
原生js实现简单的焦点图效果实例
Dec 14 Javascript
vue根据进入的路由进行原路返回的方法
Sep 26 Javascript
使用Vue实现调用接口加载页面初始数据
Oct 28 Javascript
vue设置导航栏、侧边栏为公共页面的例子
Nov 01 Javascript
JavaScript简易计算器制作
Jan 17 Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
May 26 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
Ajax+PHP边学边练 之五 图片处理
2009/12/03 PHP
php实现上传图片保存到数据库的方法
2015/02/11 PHP
PHP三种方式实现链式操作详解
2017/01/21 PHP
PHP抽象类与接口的区别详解
2019/03/21 PHP
javascript实现unicode和字符的互相转换
2007/07/18 Javascript
基于JQuery的cookie插件
2010/04/07 Javascript
jquery自定义函数的多种方法
2014/01/09 Javascript
js拼接html注意问题示例探讨
2014/07/14 Javascript
jQuery实现切换字体大小的方法
2015/03/10 Javascript
基于Node.js的JavaScript项目构建工具gulp的使用教程
2016/05/20 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
2016/12/25 Javascript
从零学习node.js之搭建http服务器(二)
2017/02/21 Javascript
JavaScript中清空数组的三种方式
2017/03/22 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
2020/02/11 Javascript
vue实现路由懒加载的3种方法示例
2020/09/01 Javascript
使用Python下的XSLT API进行web开发的简单教程
2015/04/15 Python
python实现在控制台输入密码不显示的方法
2015/07/02 Python
Python上传package到Pypi(代码简单)
2016/02/06 Python
Python多线程爬虫简单示例
2016/03/04 Python
python字典的常用操作方法小结
2016/05/16 Python
Python使用matplotlib模块绘制图像并设置标题与坐标轴等信息示例
2018/05/04 Python
python opencv 读取本地视频文件 修改ffmpeg的方法
2019/01/26 Python
python调用外部程序的实操步骤
2019/03/04 Python
Python中的self用法详解
2019/08/06 Python
详解Python模块化编程与装饰器
2021/01/16 Python
初一家长会邀请函
2014/01/31 职场文书
农民工工资承诺书范文
2014/03/31 职场文书
大学活动总结范文
2014/04/29 职场文书
2014年入党积极分子党校培训心得体会
2014/07/08 职场文书
2015年毕业生实习评语
2015/03/25 职场文书
卫生保健工作总结2015
2015/05/18 职场文书
社会实践心得体会范文
2016/01/14 职场文书
导游词之五台山
2019/10/11 职场文书
使用 JavaScript 制作页面效果
2021/04/21 Javascript
Windows中Redis安装配置流程并实现远程访问功能
2021/06/07 Redis
Python一些基本的图像操作和处理总结
2021/06/23 Python