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 相关文章推荐
超级简单的图片防盗(HTML),好用
Apr 08 Javascript
写了10年的Javascript也未必全了解的连续赋值运算
Mar 25 Javascript
jquery动态增加text元素以及删除文本内容实例代码
Jul 01 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
Feb 19 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
May 04 Javascript
JS中使用DOM来控制HTML元素
Jul 31 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
Oct 10 Javascript
利用Promise自定义一个GET请求的函数示例代码
Mar 20 Javascript
React Hooks 实现和由来以及解决的问题详解
Jan 17 Javascript
Preload基础使用方法详解
Feb 03 Javascript
2分钟实现一个Vue实时直播系统的示例代码
Jun 05 Javascript
vue中利用three.js实现全景图的完整示例
Dec 07 Vue.js
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中文URL编解码(urlencode()rawurlencode()
2010/07/03 PHP
PHP获取短链接跳转后的真实地址和响应头信息的方法
2014/07/25 PHP
用 Javascript 验证表单(form)中多选框(checkbox)值
2009/09/08 Javascript
bootstrap data与jquery .data
2014/07/07 Javascript
JavaScript实现三阶幻方算法谜题解答
2014/12/29 Javascript
JavaScript中Number.NEGATIVE_INFINITY值的使用详解
2015/06/05 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
2015/11/07 Javascript
jquery及js实现动态加载js文件的方法
2016/01/21 Javascript
js控制TR的显示隐藏
2016/03/04 Javascript
第六篇Bootstrap表格样式介绍
2016/06/21 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
2016/08/05 Javascript
AngularJS中的JSONP实例解析
2016/12/01 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
2017/07/07 Javascript
Node.js使用Express.Router的方法
2017/11/14 Javascript
JavaScript数组去重的几种方法
2019/04/07 Javascript
layui多图上传实现删除功能的例子
2019/09/23 Javascript
python虚拟环境 virtualenv的简单使用
2020/01/21 Javascript
Vue export import 导入导出的多种方式与区别介绍
2020/02/12 Javascript
JavaScript 闭包的使用场景
2020/09/17 Javascript
浅谈tensorflow中dataset.shuffle和dataset.batch dataset.repeat注意点
2020/06/08 Python
Python自动化xpath实现自动抢票抢货
2020/09/19 Python
Radley英国官网:英国莱德利小狗包
2019/03/21 全球购物
办公室副主任岗位职责
2013/11/25 职场文书
综合办公室主任职责
2013/12/16 职场文书
读书小明星事迹材料
2014/05/03 职场文书
酒店开业策划方案
2014/06/02 职场文书
2014年图书管理员工作总结
2014/12/01 职场文书
2015自愿离婚协议书范本
2015/01/28 职场文书
英文版辞职信
2015/02/28 职场文书
幼儿园教师工作总结2015
2015/04/02 职场文书
百万英镑观后感
2015/06/09 职场文书
宣传稿格式范文
2015/07/23 职场文书
我的中国梦主题班会
2015/08/14 职场文书
Python机器学习之PCA降维算法详解
2021/05/19 Python
mysql连接查询中and与where的区别浅析
2021/07/01 MySQL
阿里云服务器(windows)手动部署FTP站点详细教程
2022/08/05 Servers