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 相关文章推荐
学习YUI.Ext基础第一天
Mar 10 Javascript
Javascript 实用小技巧
Apr 07 Javascript
js实现网站首页图片滚动显示
Feb 04 Javascript
原生JS实现拖拽图片效果
Aug 27 Javascript
基于Jquery插件实现跨域异步上传文件功能
Apr 26 Javascript
Bootstrap编写导航栏和登陆框
May 30 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
Apr 23 Javascript
vue移动端实现红包雨效果
Jun 23 Javascript
layui+jquery支持IE8的表格分页方法
Sep 28 jQuery
通过原生vue添加滚动加载更多功能
Nov 21 Javascript
JS数组方法concat()用法实例分析
Jan 18 Javascript
vue组件开发之tab切换组件使用详解
Aug 21 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
农民C键的运用技巧
2020/03/04 星际争霸
PHP常用正则表达式集锦
2014/08/17 PHP
php绘制一条直线的方法
2015/01/24 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
jquery中ajax学习笔记3
2011/10/16 Javascript
了解了这些才能开始发挥jQuery的威力
2013/10/10 Javascript
js禁止页面使用右键(简单示例代码)
2013/11/13 Javascript
jquery实现checkbox 全选/全不选的通用写法
2014/02/22 Javascript
jquery自定义表格样式
2015/11/23 Javascript
js放大镜放大购物图片效果
2017/01/18 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
2017/03/21 Javascript
微信小程序教程系列之设置标题栏和导航栏(7)
2020/06/29 Javascript
详解Node使用Puppeteer完成一次复杂的爬虫
2018/04/18 Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
2018/08/24 Javascript
简单分析js中的this的原理
2019/08/31 Javascript
关于vue的列表图片选中打钩操作
2020/09/09 Javascript
[37:45]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS Orenda
2014/05/22 DOTA
pyqt5 实现 下拉菜单 + 打开文件的示例代码
2019/06/20 Python
python如何实现代码检查
2019/06/28 Python
Python装饰器原理与基本用法分析
2020/01/07 Python
python使用gdal对shp读取,新建和更新的实例
2020/03/10 Python
python nohup 实现远程运行不宕机操作
2020/04/16 Python
Pycharm调试程序技巧小结
2020/08/08 Python
pandas map(),apply(),applymap()区别解析
2021/02/24 Python
详解css3 mask遮罩实现一些特效
2018/10/24 HTML / CSS
分解成质因数(如435234=251*17*17*3*2,据说是华为笔试题)
2014/07/16 面试题
思想汇报范文
2013/11/04 职场文书
垃圾分类的活动方案
2014/08/15 职场文书
死亡证明书样本说明
2014/10/18 职场文书
大学生入党积极分子党校学习思想汇报
2014/10/25 职场文书
财务工作失职检讨书
2014/11/21 职场文书
青年岗位能手事迹材料
2014/12/23 职场文书
出生公证书
2015/01/23 职场文书
2015年计生协会工作总结
2015/04/24 职场文书
《揠苗助长》教学反思
2016/02/20 职场文书
Python anaconda安装库命令详解
2021/10/16 Python