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中关于break,continue的特殊用法与介绍
May 24 Javascript
javascript错误的认识不用关心内存管理
Dec 15 Javascript
js 判断计算字符串长度/判断空的简单方法
Aug 05 Javascript
没有document.getElementByName方法
Aug 19 Javascript
JS如何将UTC格式时间转本地格式
Sep 04 Javascript
jquery操作复选框checkbox的方法汇总
Feb 05 Javascript
高性能的javascript之加载顺序与执行原理篇
Jan 14 Javascript
JS中call和apply函数用法实例分析
Jun 20 Javascript
Vue中保存数据到磁盘文件的方法
Sep 06 Javascript
关于自定义Egg.js的请求级别日志详解
Dec 12 Javascript
layui 表单标签的校验方法
Sep 04 Javascript
Javascript异步流程控制之串行执行详解
Sep 27 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
php多用户读写文件冲突的解决办法
2013/11/06 PHP
php魔术函数__call()用法实例分析
2015/02/13 PHP
php基于dom实现的图书xml格式数据示例
2017/02/03 PHP
PHP获取数组中单列值的方法
2017/06/10 PHP
PHP获取文件扩展名的方法实例总结
2017/06/10 PHP
PHP后端银联支付及退款实例代码
2017/06/23 PHP
jquery实现html页面 div 假分页有原理有代码
2014/09/06 Javascript
JavaScript的Date()方法使用详解
2015/06/09 Javascript
jQuery取消特定的click事件
2016/02/29 Javascript
Winform客户端向web地址传参接收参数的方法
2016/05/17 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
2016/08/01 Javascript
vue.js入门教程之计算属性
2016/09/01 Javascript
Vue.js动态添加、删除选题的实例代码
2016/09/30 Javascript
js正则表达式注册页面表单验证
2016/10/11 Javascript
Javascript的this用法
2017/01/16 Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
2017/09/13 Javascript
Vue 父子组件的数据传递、修改和更新方法
2018/03/01 Javascript
element vue Array数组和Map对象的添加与删除操作
2018/11/14 Javascript
Node.js+ELK日志规范的实现
2019/05/23 Javascript
vue 弹出遮罩层样式实例
2020/07/22 Javascript
Python 字符串定义
2009/09/25 Python
python中lambda与def用法对比实例分析
2015/04/30 Python
pygame游戏之旅 计算游戏中躲过的障碍数量
2018/11/20 Python
ubuntu 16.04下python版本切换的方法
2019/06/14 Python
基于python2.7实现图形密码生成器的实例代码
2019/11/05 Python
python shell命令行中import多层目录下的模块操作
2020/03/09 Python
美国厨房和园艺工具网上商店:Nestneed
2019/08/24 全球购物
世界上最受欢迎的花店:1-800-Flowers.com
2020/06/01 全球购物
工程师自我评价怎么写
2013/09/19 职场文书
出生证明公证书
2014/04/09 职场文书
新党章的学习心得体会
2014/11/07 职场文书
护林员个人总结
2015/03/04 职场文书
2016初一新生军训心得体会
2016/01/11 职场文书
面试提问mysql一张表到底能存多少数据
2022/03/13 MySQL
「SHOW BY ROCK!!」“雫シークレットマインド”组合单曲MV公开
2022/03/21 日漫
Linux、ubuntu系统下查看显卡型号、显卡信息详解
2022/04/07 Servers