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 相关文章推荐
jquery复选框全选/取消示例
Dec 30 Javascript
jQuery Migrate 1.1.0 Released 注意事项
Jun 14 Javascript
基于javascript实现右下角浮动广告效果
Jan 08 Javascript
Bootstrap每天必学之附加导航(Affix)插件
Apr 25 Javascript
Javascript打印局部页面实例
Jun 21 Javascript
js实现可键盘控制的简单抽奖程序
Jul 13 Javascript
解析JavaScript数组方法reduce
Dec 12 Javascript
javascript获取图片的top N主色值方法详解
Jan 26 Javascript
浅谈Javascript常用正则表达式应用
Mar 08 Javascript
解决layer.msg 不居中 ifram中的问题
Sep 05 Javascript
Openlayers实现地图的基本操作
Sep 28 Javascript
React实现todolist功能
Dec 28 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
千呼万唤始出来,DOTA2勇士令状不朽宝藏Ⅱ现已推出
2020/08/25 DOTA
基于qmail的完整WEBMAIL解决方案安装详解
2006/10/09 PHP
PHP程序中使用adodb连接不同数据库的代码实例
2015/12/19 PHP
Laravel中间件实现原理详解
2016/10/09 PHP
PHP实现与java 通信的插件使用教程
2019/08/11 PHP
AngualrJS中的Directive制作一个菜单
2016/01/26 Javascript
javascript实现查找数组中最大值方法汇总
2016/02/13 Javascript
轻松掌握JavaScript代理模式
2016/08/26 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
2017/02/22 Javascript
Vue监听数据对象变化源码
2017/03/09 Javascript
JS排序之快速排序详解
2017/04/08 Javascript
JavaScript 2018 中即将迎来的新功能
2018/09/21 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
2019/06/17 Javascript
解决vue项目,npm run build后,报路径错的问题
2020/08/13 Javascript
javascript实现智能手环时间显示
2020/09/18 Javascript
Python将xml和xsl转换为html的方法
2015/03/10 Python
使用Python批量修改文件名的代码实例
2019/01/24 Python
Python 网络编程之UDP发送接收数据功能示例【基于socket套接字】
2019/10/11 Python
如何使用Python破解ZIP或RAR压缩文件密码
2020/01/09 Python
python用WxPython库实现无边框窗体和透明窗体实现方法详解
2020/02/21 Python
python和JavaScript哪个容易上手
2020/06/23 Python
python中的django是做什么的
2020/07/31 Python
英国时尚服饰电商:Boohoo
2017/10/12 全球购物
泰国健康和美容服务预订网站:GoWabi
2019/06/03 全球购物
化验室技术员岗位职责
2013/12/24 职场文书
公司行政经理岗位职责
2013/12/24 职场文书
市场营销个人求职信范文
2014/02/02 职场文书
个性与发展自我评价
2014/02/11 职场文书
项目负责人任命书
2014/06/04 职场文书
病房管理制度范本
2015/08/06 职场文书
中学政教处工作总结
2015/08/13 职场文书
初三英语教学反思
2016/02/15 职场文书
七年级作文之秋游
2019/10/21 职场文书
http通过StreamingHttpResponse完成连续的数据传输长链接方式
2022/02/12 Python
业余无线电通联Q语
2022/02/18 无线电
MySQL新手入门进阶语句汇总
2022/09/23 MySQL