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实现excel导出的方法
Apr 04 Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
Dec 16 Javascript
js图片模糊切换显示特效的方法
Feb 17 Javascript
jQuery ajax方法传递中文时出现中文乱码的解决方法
Jul 25 Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
Jul 25 Javascript
从setTimeout看js函数执行过程
Dec 19 Javascript
Angular5给组件本身的标签添加样式class的方法
Apr 07 Javascript
vue 组件高级用法实例详解
Apr 11 Javascript
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
Jul 03 Javascript
javascript的惯性运动实现代码实例
Sep 07 Javascript
JavaScript监听触摸事件代码实例
Dec 30 Javascript
Typescript3.9 常用新特性一览(推荐)
May 14 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中Date获取时间不正确怎么办
2008/06/05 PHP
工厂模式在Zend Framework中应用介绍
2012/07/10 PHP
8个必备的PHP功能实例代码
2013/10/27 PHP
thinkphp实现面包屑导航(当前位置)例子分享
2014/05/10 PHP
php字符串函数学习之strstr()
2015/03/27 PHP
PHP cURL初始化和执行方法入门级代码
2015/05/28 PHP
一个PHP实现的轻量级简单爬虫
2015/07/08 PHP
thinkphp 框架数据库切换实现方法分析
2020/05/18 PHP
懒就要懒到底——鼠标自动点击(含时间判断)
2007/02/20 Javascript
js禁止回车提交表单的示例代码
2013/12/23 Javascript
中止javascript执行的方法
2014/02/14 Javascript
AngularJS入门教程(二):AngularJS模板
2014/12/06 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
2015/08/26 Javascript
原生JavaScript实现异步多文件上传
2015/12/02 Javascript
一步步教你利用Canvas对图片进行处理
2017/09/19 Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
2018/06/14 Javascript
JavaScript实现异步图像上传功能
2018/07/12 Javascript
Node.js使用supervisor进行开发中调试的方法
2019/03/26 Javascript
vue实现todolist功能、todolist组件拆分及todolist的删除功能
2019/04/11 Javascript
对Layer弹窗使用及返回数据接收的实例详解
2019/09/26 Javascript
javascript 设计模式之享元模式原理与应用详解
2020/04/08 Javascript
django传值给模板, 再用JS接收并进行操作的实例
2018/05/28 Python
Windows 64位下python3安装nltk模块
2018/09/19 Python
对python列表里的字典元素去重方法详解
2019/01/21 Python
Python OpenCV之图片缩放的实现(cv2.resize)
2019/06/28 Python
wxPython电子表格功能wx.grid实例教程
2019/11/19 Python
python GUI库图形界面开发之PyQt5信号与槽基本操作
2020/02/25 Python
Pycharm在指定目录下生成文件和删除文件的实现
2020/12/28 Python
测绘工程本科生求职信
2013/10/10 职场文书
物业管理个人自我评价
2013/11/08 职场文书
钱学森观后感
2015/06/04 职场文书
服装店员工管理制度
2015/08/07 职场文书
小学体育队列队形教学反思
2016/02/16 职场文书
JavaScript实现简单图片切换
2021/04/29 Javascript
浅谈Python类的单继承相关知识
2021/05/12 Python
win10怎么设置右下角图标不折叠?Win10设置右下角图标不折叠的方法
2022/07/15 数码科技