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 相关文章推荐
响应鼠标变换表格背景或者颜色的代码
Mar 30 Javascript
通过Javascript读取本地Excel文件内容的代码示例
Apr 08 Javascript
jquery实现预览提交的表单代码分享
May 21 Javascript
常用jQuery选择器总结
Jul 11 Javascript
JavaScript function 的 length 属性使用介绍
Sep 15 Javascript
Javascript中的return作用及javascript return关键字用法详解
Nov 05 Javascript
jQuery实现手机版页面翻页效果的简单实例
Oct 05 Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
Jan 13 Javascript
angular1配合gulp和bower的使用教程
Jan 19 Javascript
详解vuex 渐进式教程实例代码
Nov 27 Javascript
详解vue中的computed的this指向问题
Dec 05 Javascript
js实现打字小游戏
Dec 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 咖啡文化
ThinkPHP关联模型操作实例分析
2012/09/23 PHP
php使用mb_check_encoding检查字符串在指定的编码里是否有效
2013/11/07 PHP
PHP对XML内容进行修改和删除实例代码
2016/10/26 PHP
PHP用函数嵌入网站访问量计数器
2017/10/27 PHP
一个挺有意思的Javascript小问题说明
2011/09/26 Javascript
javascript学习笔记(十九) 节点的操作实现代码
2012/06/20 Javascript
jQuery实现id模糊查询的小例子
2013/03/19 Javascript
纯JavaScript实现获取onclick、onchange等事件的值
2014/12/29 Javascript
jquery使用正则表达式验证email地址的方法
2015/01/22 Javascript
JS实现自动变化的导航菜单效果代码
2015/09/09 Javascript
表单中单选框添加选项和移除选项
2016/07/04 Javascript
AngularJS控制器之间的数据共享及通信详解
2016/08/01 Javascript
酷! 不同风格页面布局幻灯片特效js实现
2021/02/19 Javascript
Bootstrap 响应式实用工具实例详解
2017/03/29 Javascript
Vue Prop属性功能与用法实例详解
2019/02/23 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
2019/09/12 Javascript
vue实现将一个数组内的相同数据进行合并
2019/11/07 Javascript
Postman参数化实现过程及原理解析
2020/08/13 Javascript
Python实现测试磁盘性能的方法
2015/03/12 Python
对django xadmin自定义菜单的实例详解
2019/01/03 Python
Python常见的pandas用法demo示例
2019/03/16 Python
Python 用turtle实现用正方形画圆的例子
2019/11/21 Python
Python Celery多队列配置代码实例
2019/11/22 Python
浅谈pytorch、cuda、python的版本对齐问题
2020/01/15 Python
phonegap常用事件总结(必看篇)
2017/03/31 HTML / CSS
html5组织内容_动力节点Java学院整理
2017/07/10 HTML / CSS
蹦床仓库:Trampoline Warehouse
2018/12/06 全球购物
htmlentities() 和 htmlspecialchars()有什么区别
2015/07/01 面试题
应聘教师自荐信
2013/10/12 职场文书
一年级家长会邀请函
2014/01/25 职场文书
《台湾的蝴蝶谷》教学反思
2014/02/20 职场文书
《故乡》教学反思
2014/04/10 职场文书
群众路线教育实践活动学习笔记内容
2014/11/06 职场文书
大学生创业事迹材料
2014/12/30 职场文书
2016年小学生迎国庆广播稿
2015/12/18 职场文书