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 常用代码技巧大收集
Feb 25 Javascript
JavaScript中数据结构与算法(三):链表
Jun 19 Javascript
Javascript模仿淘宝信用评价实例(附源码)
Nov 26 Javascript
javascript实现九宫格相加数值相等
May 28 Javascript
Function.prototype.apply()与Function.prototype.call()小结
Apr 27 Javascript
JS数组返回去重后数据的方法解析
Jan 03 Javascript
xmlplus组件设计系列之文本框(TextBox)(3)
May 03 Javascript
JS实现手写parseInt的方法示例
Sep 24 Javascript
vue2.0 和 animate.css的结合使用
Dec 12 Javascript
JS面向对象的程序设计相关知识小结
May 26 Javascript
vuedraggable+element ui实现页面控件拖拽排序效果
Jul 29 Javascript
Vue数字输入框组件的使用方法
Oct 19 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中for循环语句的几种变型
2006/11/26 PHP
php 获取mysql数据库信息代码
2009/03/12 PHP
php下把数组保存为文件格式的实例应用
2010/02/08 PHP
PHP 图像尺寸调整代码
2010/05/26 PHP
PHP函数学习之PHP函数点评
2012/07/05 PHP
PHP封装类似thinkphp连贯操作数据库Db类与简单应用示例
2019/05/08 PHP
商城常用滚动的焦点图效果代码简单实用
2013/03/28 Javascript
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
2013/06/17 Javascript
jquery将一个表单序列化为一个对象的方法
2013/12/02 Javascript
Js判断CSS文件加载完毕的具体实现
2014/01/17 Javascript
Javascript中innerHTML用法实例分析
2015/01/12 Javascript
JS组件系列之Bootstrap Icon图标选择组件
2016/01/28 Javascript
原生js二级联动效果
2017/06/20 Javascript
详解vue几种主动刷新的方法总结
2019/02/19 Javascript
浅析vue中的provide / inject 有什么用处
2019/11/10 Javascript
JavaScript ES 模块的使用
2020/11/12 Javascript
Linux下多个Python版本安装教程
2018/08/15 Python
解决python super()调用多重继承函数的问题
2019/06/26 Python
Python画图高斯分布的示例
2019/07/10 Python
Django Celery异步任务队列的实现
2019/07/24 Python
python3 实现口罩抽签的功能
2020/03/11 Python
CSS3之背景尺寸Background-size使用介绍
2013/10/14 HTML / CSS
HTML5中的Scoped属性使用实例
2014/04/23 HTML / CSS
什么是makefile? 如何编写makefile?
2013/01/02 面试题
中专生学习生活的自我评价分享
2013/10/27 职场文书
医生进修自我鉴定
2014/01/19 职场文书
中学劳技课教师的自我评价
2014/02/05 职场文书
小学语文课后反思精选
2014/04/25 职场文书
通信工程专业求职信
2014/06/04 职场文书
项目经理岗位职责
2015/01/31 职场文书
工作迟到检讨书范文
2015/05/06 职场文书
2015小学教师德育工作总结
2015/05/12 职场文书
毕业晚宴祝酒词
2015/08/11 职场文书
2016年党校科级干部培训班学习心得体会
2016/01/06 职场文书
Pytorch中的数据集划分&正则化方法
2021/05/27 Python
CDPR谈《巫师》新作用虚幻5原因 称不会为Epic独占
2022/04/06 其他游戏