js控制table合并具体实现

代码如下:

<!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>

赞 (0)

相关推荐

  • js操作table元素实现表格行列新增、删除技巧总结

    本文实例讲述了js操作table元素实现表格行列新增.删除的方法.分享给大家供大家参考,具体如下: /************ TableTool.js ****************************************************************************************************************** **********************************************************

  • 利用js制作html table分页示例(js实现分页)

    利用js制作html table分页示例(js实现分页)

    有时候table的列数太长,不利于使用者查询,所以利用JS做了一个table的分页,以下为相关代码 一.JS代码 复制代码 代码如下: <script type="text/javascript">            var pageSize = 15;    //每页显示的记录条数             var curPage=0;        //当前页             var lastPage;        //最后页             var

  • js添加table的行和列 具体实现方法

    复制代码 代码如下: <!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>    <title></titl

  • js实现html table 行,列锁定的简单实例

    js实现html table 行,列锁定的简单实例

    js实现html table 表头,指定列锁定 实现效果如下: 感兴趣的朋友可以直接复制出来运行看效果. <!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"

  • JS显示表格内指定行html代码的方法

    本文实例讲述了JS显示表格内指定行html代码的方法.分享给大家供大家参考.具体如下: 下面的js代码演示了如何通过表格的rows数组获得指定行的html代码,包含了所有列 <!DOCTYPE html> <html> <head> <script> function showRow() { alert(document.getElementById('myTable').rows[0].innerHTML); } </script> </

  • js控制table合并具体实现

    复制代码 代码如下: <!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=&qu

  • JS控制表格实现一条光线流动分割行的方法

    本文实例讲述了JS控制表格实现一条光线流动分割行的方法.分享给大家供大家参考.具体分析如下: 这是很漂亮的一个分割行的代码. 其实就是利用JS控制表格实现的一条七彩流光分割横线 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>js用单元格实现的七彩线条</tit

  • Js获取table当前tr行的值的代码

    下面的代码主要是学习控制表格里面的一些操作,代码都是直接写在表格里面的, 大家可以改成事件绑定的. Js获取 table当前行的值 var selectedTr=null; function c1(obj){ obj.style.backgroundColor='blue'; //把点到的那一行变希望的颜色; if(selectedTr!=null) selectedTr.style.removeAttribute("backgroundColor"); if(selectedTr==

  • JS控制表单提交的方法

    本文实例讲述了JS控制表单提交的方法.分享给大家供大家参考.具体如下: <Script Language="JavaScript"> function autoSubmit(){ var form = document.forms[0]; var actionPath = "?mo=phone"; form.action = actionPath; form.submit(); return true; } </Script> 如果需要两个提

  • JS控制伪元素的方法汇总

    一. 缘由: 本文源于在OSC社区中,有人提问如何用jq获取伪元素.我第一想法是强大的CSS Query应该可以获取伪元素吧. 然而事实上,CSS Query并不能.即我们不能通过$(":before").$(dom).find(":before")或document.querySelector(":before")来获取:before伪元素. 为此,我不得不重新了解伪元素(Pseudo-elements).为什么不能用JS直接获取伪元素呢? 譬

  • js控制div弹出层实现方法

    本文实例讲述了js控制div弹出层实现方法.分享给大家供大家参考.具体分析如下: 这是个功能很好,且容易调用和控制的弹出层.感兴趣的朋友可以调试运行一下看看效果如何~O(∩_∩)O~ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>弹出窗口(可拖动,背景灰色透明)</title&g

  • JS控制网页动态生成任意行列数表格的方法

    本文实例讲述了JS控制网页动态生成任意行列数表格的方法.分享给大家供大家参考.具体分析如下: 这是一个非常简单使用的JS在线生成表格的代码效果 通过JS功能代码,直接输入行数和列数就可以自动生成你需要的表格 当然你也可以扩展JS代码实现生成文字的各种形式 复制代码 代码如下: <html> <head> <title>Js动态生成表格</title> <style type="text/css"> table{font-siz

  • 用JS控制表格的逐行变色的表单

    优点: 1.代码干净,无冗余标签. 2.样式,结构分离(为了方便,样式用内联的形式,实现应用时可以用外联方式引用.) 3.用JS控制表格的逐行变色 4.支持选中项高亮 5.支持checkbox的全选/取消功能 6.分页标签已经做好,没有做后台代码(以后有时间更新) 7.兼容性测试:已测试过ie5.01 ie5.5 ie6 ie7 ff2 opera浏览器 友好度良好的表格 *{font-family:Tahoma, Arial, Helvetica, Sans-serif,"宋体";}

  • JavaScript控制table某列不显示的方法

    本文实例讲述了JavaScript控制table某列不显示的方法.分享给大家供大家参考.具体实现方法如下: 1.table代码 复制代码 代码如下: <table id="mytable" border="0" width="1400" align="center"    cellpadding="3" cellspacing="1" bgcolor="#dfdfdf&q

随机推荐