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 相关文章推荐
ajax 文件上传应用简单实现
Mar 03 Javascript
js获取某月的最后一天日期的简单实例
Jun 22 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
Jan 26 Javascript
原生js事件的添加和删除的封装
Jul 01 Javascript
详解angular element()方法使用
Apr 08 Javascript
Javascript快速实现浏览器系统通知
Aug 26 Javascript
seajs中最常用的7个功能、配置示例
Oct 10 Javascript
详解Angular2学习笔记之Html属性绑定
Jan 03 Javascript
JS从非数组对象转数组的方法小结
Mar 26 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
Mar 01 Javascript
vue resource发送请求的几种方式
Sep 30 Javascript
基于js实现判断浏览器类型代码实例
Jul 17 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
轻松入门: 煮好咖啡的七个诀窍
2021/03/03 冲泡冲煮
php 进度条实现代码
2009/03/10 PHP
PHP中使用sleep函数实现定时任务实例分享
2014/08/21 PHP
php实现的简单中文验证码功能示例
2017/01/03 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
javascript 清除输入框中的数据
2009/04/13 Javascript
JavaScript学习历程和心得小结
2010/08/16 Javascript
Js判断CSS文件加载完毕的具体实现
2014/01/17 Javascript
JavaScript中的eval()函数使用介绍
2014/12/31 Javascript
pace.js页面加载进度条插件
2015/09/29 Javascript
去除字符串左右两边的空格(实现代码)
2016/05/12 Javascript
详解jQuery中关于Ajax的几个常用的函数
2017/07/17 jQuery
Angular中的$watch方法详解
2017/09/18 Javascript
利用Javascript实现一套自定义事件机制
2017/12/14 Javascript
了解ESlint和其相关操作小结
2018/05/21 Javascript
使用JS判断移动端手机横竖屏状态
2018/07/30 Javascript
微信小程序提取公用函数到util.js及使用方法示例
2019/01/10 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
2019/11/13 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
2020/03/29 Javascript
javascript实现数字时钟效果
2021/02/06 Javascript
python实现每次处理一个字符的三种方法
2014/10/09 Python
python实现在每个独立进程中运行一个函数的方法
2015/04/23 Python
基于Linux系统中python matplotlib画图的中文显示问题的解决方法
2017/06/15 Python
Windows 8.1 64bit下搭建 Scrapy 0.22 环境
2018/11/18 Python
Tensorflow实现酸奶销量预测分析
2019/07/19 Python
Python实现代码块儿折叠
2020/04/15 Python
Python实现动态循环输出文字功能
2020/05/07 Python
python写文件时覆盖原来的实例方法
2020/07/22 Python
Html5实现二维码扫描并解析
2016/01/20 HTML / CSS
阿德的梦教学反思
2014/02/06 职场文书
宾馆总经理岗位职责
2014/02/14 职场文书
调查研究项目计划书
2014/04/29 职场文书
环境保护标语
2014/06/20 职场文书
门卫岗位职责说明书
2014/08/18 职场文书
寻找最美家庭活动方案
2014/08/20 职场文书
团队拓展活动总结
2014/08/27 职场文书