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的IE和Firefox兼容性汇编(zz)
Feb 02 Javascript
jquery $.ajax各个事件执行顺序
Oct 15 Javascript
Textbox控件注册回车事件及触发按钮提交事件具体实现
Mar 04 Javascript
js类式继承的具体实现方法
Dec 31 Javascript
js实现两点之间画线的方法
May 12 Javascript
Javascript实现网络监测的方法
Jul 31 Javascript
jquery UI Datepicker时间控件冲突问题解决
Dec 16 Javascript
页面间固定参数,通过cookie传值的实现方法
May 31 Javascript
原生JS实现多个小球碰撞反弹效果示例
Jan 31 Javascript
vuejs前后端数据交互之从后端请求数据的实例
Aug 11 Javascript
从0搭建vue-cli4脚手架
Jun 17 Javascript
OpenLayers3实现地图显示功能
Sep 25 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
雄兵连三大错觉:凯莎没了,凉冰阵亡了,华烨觉得自己又行了
2020/04/09 国漫
ThinkPHP快速入门实例教程之数据分页
2014/07/01 PHP
php自定义时间转换函数示例
2016/12/07 PHP
javascript验证身份证完全方法具体实现
2013/11/18 Javascript
jquery解析XML字符串和XML文件的方法说明
2014/02/21 Javascript
js获取数组的最后一个元素
2015/04/14 Javascript
代码分析jQuery四种静态方法使用
2015/07/23 Javascript
js滑动提示效果代码分享
2016/03/10 Javascript
js判断输入字符串是否为空、空格、null的方法总结
2016/06/14 Javascript
JS从数组中随机取出几个数组元素的方法
2016/08/02 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
2016/11/22 Javascript
JavaScript数据结构之链表的实现
2017/03/19 Javascript
纯JS实现只能输入数字的简单代码
2017/06/21 Javascript
在一个页面实现两个zTree联动的方法
2017/12/20 Javascript
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
2018/08/20 Javascript
vue头部导航动态点击处理方法
2018/11/02 Javascript
JS实现的获取银行卡号归属地及银行卡类型操作示例
2019/01/08 Javascript
JavaScript使用Math.random()生成简单的验证码
2019/01/21 Javascript
简单了解vue 插值表达式Mustache
2020/07/22 Javascript
JS数组转字符串实现方法解析
2020/09/04 Javascript
[50:05]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
Python3 适合初学者学习的银行账户登录系统实例
2017/08/08 Python
对python内置map和six.moves.map的区别详解
2018/12/19 Python
安装Anaconda3及使用Jupyter的方法
2020/10/27 Python
Perricone MD裴礼康美国官网:抗衰老护肤品
2016/09/26 全球购物
18-35岁旅游团的全球领导者:Contiki
2017/02/08 全球购物
法国在线购买汽车轮胎网站:123pneus.fr
2019/02/25 全球购物
照片礼物和装饰:MyPhoto
2019/11/02 全球购物
学生个人的自我评价分享
2013/11/05 职场文书
高中生物教学反思
2014/02/05 职场文书
青安岗事迹材料
2014/05/14 职场文书
庆国庆活动总结
2014/08/28 职场文书
2014年幼儿园国庆主题活动方案
2014/09/16 职场文书
加强干部作风建设整改方案
2014/10/24 职场文书
保密法制宣传月活动总结
2015/05/07 职场文书
患者身份识别制度
2015/08/06 职场文书