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 相关文章推荐
Textarea与懒惰渲染实现代码
Jan 04 Javascript
JS实现让网页背景图片斜向移动的方法
Feb 25 Javascript
JS建造者模式基本用法实例分析
Jun 30 Javascript
Javascript编程中几种继承方式比较分析
Nov 28 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
Jan 04 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
Jan 22 Javascript
最原始的jQuery注册验证方式
Oct 11 Javascript
angular2系列之路由转场动画的示例代码
Nov 09 Javascript
json对象及数组键值的深度大小写转换问题详解
Mar 30 Javascript
关于Google发布的JavaScript代码规范你要知道哪些
Apr 04 Javascript
Layui数据表格之单元格编辑方式
Oct 26 Javascript
Vant 在vue-cli 4.x中按需加载操作
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实现图片自动清理的方法
2015/07/08 PHP
谈谈PHP中substr和substring的正确用法及相关参数的介绍
2015/12/16 PHP
Yii2 queue的队列使用详解
2019/07/19 PHP
Yii框架安装简明教程
2020/05/15 PHP
qTip 基于JQuery的Tooltip插件[兼容性好]
2010/09/01 Javascript
关于js中alert弹出窗口文本换行问题简单详细说明
2012/12/11 Javascript
无缝滚动js代码通俗易懂(自写)
2013/06/19 Javascript
js Array操作的最简短最容易理解方法
2013/12/09 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
2015/07/02 Javascript
Node.js操作mysql数据库增删改查
2016/03/30 Javascript
JQuery控制DIV的选取实现方法
2016/09/18 Javascript
javascript基础知识讲解
2017/01/11 Javascript
Easyui Datagrid自定义按钮列(最后面的操作列)
2017/07/13 Javascript
Angular将填入表单的数据渲染到表格的方法
2017/09/22 Javascript
Vue2仿淘宝实现省市区三级联动
2020/04/15 Javascript
Vue中的v-for循环key属性注意事项小结
2018/08/12 Javascript
react 移动端实现列表左滑删除的示例代码
2019/07/04 Javascript
微信小程序分包加载代码实现方法详解
2019/09/23 Javascript
Ant Design moment对象和字符串之间的相互转化教程
2020/10/27 Javascript
详解python脚本自动生成需要文件实例代码
2017/02/04 Python
pycharm安装图文教程
2017/05/02 Python
Python数据结构之栈、队列的实现代码分享
2017/12/04 Python
python将文本中的空格替换为换行的方法
2018/03/19 Python
Django项目开发中cookies和session的常用操作分析
2018/07/03 Python
在ubuntu16.04中将python3设置为默认的命令写法
2018/10/31 Python
Python 中的 global 标识对变量作用域的影响
2019/08/12 Python
Django中间件拦截未登录url实例详解
2019/09/03 Python
python生成器/yield协程/gevent写简单的图片下载器功能示例
2019/10/28 Python
Python实现爬取网页中动态加载的数据
2020/08/17 Python
通过实例解析Python文件操作实现步骤
2020/09/21 Python
css3背景图片透明叠加属性cross-fade简介及用法实例
2013/01/08 HTML / CSS
巴西葡萄酒销售网站:Wine.com.br
2017/11/07 全球购物
lookfantastic荷兰:在线购买奢华护肤、护发和化妆品
2018/11/27 全球购物
Servlet的实例是在生命周期什么时候创建的?配置servlet最重要的是什么?
2012/05/30 面试题
车队司机自我鉴定
2014/03/02 职场文书
2014年煤矿工人工作总结
2014/12/08 职场文书