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 相关文章推荐
JS解密入门 最终变量劫持
Jun 25 Javascript
详解JavaScript函数绑定
Aug 18 Javascript
wap图片滚动特效无css3元素纯js脚本编写
Aug 22 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
Jan 27 Javascript
JavaScript模拟鼠标右键菜单效果
Dec 08 Javascript
js拼接html字符串的注意事项
Oct 13 Javascript
javascript常用经典算法详解
Jan 11 Javascript
JavaScript中一些特殊的字符运算
Aug 17 Javascript
Three.js利用dat.GUI如何简化试验流程详解
Sep 26 Javascript
jquery动态添加带有样式的HTML标签元素方法
Feb 24 jQuery
JavaScript中toLocaleString()和toString()的区别实例分析
Aug 14 Javascript
解决vue.js提交数组时出现数组下标的问题
Nov 05 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
PHP新手上路(七)
2006/10/09 PHP
《PHP编程最快明白》第五讲:php目录、文件操作
2010/11/01 PHP
PHP中UNIX时间戳和日期间的转换与计算实例
2014/11/19 PHP
php中Ctype函数用法详解
2014/12/09 PHP
Yii学习总结之数据访问对象 (DAO)
2015/02/22 PHP
php读取csv文件并输出的方法
2015/03/14 PHP
详解PHP的Yii框架中组件行为的属性注入和方法注入
2016/03/18 PHP
Mozilla 表达式 __noSuchMethod__
2009/04/05 Javascript
JavaScript 面向对象编程(1) 基础
2010/05/18 Javascript
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
2013/04/08 Javascript
js Map List 遍历使用示例
2013/07/10 Javascript
jQuery绑定事件不执行但alert后可以正常执行
2014/06/03 Javascript
Javascript节点关系实例分析
2015/05/15 Javascript
JavaScript6 let 新语法优势介绍
2016/07/15 Javascript
实例解析Array和String方法
2016/12/14 Javascript
Angular2进阶之如何避免Dom误区
2018/04/02 Javascript
微信小程序移动拖拽视图-movable-view实例详解
2019/08/17 Javascript
ES6基础之数组和对象的拓展实例详解
2019/08/22 Javascript
Sublime Text3 配置 NodeJs 环境的方法
2020/05/20 NodeJs
JS JQuery获取data-*属性值方法解析
2020/09/01 jQuery
用Python实现通过哈希算法检测图片重复的教程
2015/04/02 Python
在Python的web框架中配置app的教程
2015/04/30 Python
python用10行代码实现对黄色图片的检测功能
2015/08/10 Python
python中的编码知识整理汇总
2016/01/26 Python
常用python编程模板汇总
2016/02/12 Python
详解Python中的array数组模块相关使用
2016/07/05 Python
python pexpect ssh 远程登录服务器的方法
2019/02/14 Python
基于python的BP神经网络及异或实现过程解析
2019/09/30 Python
python 监控服务器是否有人远程登录(详细思路+代码)
2020/12/18 Python
HTML5新增form控件和表单属性实例代码详解
2019/05/15 HTML / CSS
杰夫·班克斯男士服装网上商店:Jeff Banks
2019/10/24 全球购物
2014年财务经理工作总结
2014/12/08 职场文书
重阳节慰问信
2015/02/15 职场文书
职位证明模板
2015/06/23 职场文书
《西游记》读后感(3篇)
2019/09/20 职场文书
python 实现体质指数BMI计算
2021/05/26 Python