`

js合并单元格

    博客分类:
  • js
阅读更多
数据是动态生成的。如:
姓名 性别 年龄 科目 分数
张三 男 22 数学 90
张三 男 22 语文 70
张三 男 22 英语 60
李四 女 19 数学 60
李四 女 19 语文 60
王五 男 20 英语 60

要求用js把姓名、性别、年龄列相同的单元格合并。
因为结果集是查询得到的,所以要动态合并。
我已经实现了项目列相同单元格的合并,
但怎样将姓名、性别、年龄3列相同的单元格都合并呢?谢谢。

代码如下
!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=utf-8" />
<title>无标题文档 </title>
</head>

<body>
<table width="100%" border="1" cellspacing="0" cellpadding="0" id="tab">
  <tr>
  <td>张三 </td>
  <td>男</td>
  <td>22</td>
  <td>数学 </td>
  <td>90 </td>
  </tr>
  <tr>
  <td>张三 </td>
  <td>男</td>
  <td>22</td>
  <td>语文 </td>
  <td>70 </td>
  </tr>
  <tr>
  <td>张三 </td>
  <td>男</td>
  <td>22</td>
  <td>英语 </td>
  <td>60 </td>
  </tr>
  <tr>
  <td>李四 </td>
  <td>女</td>
  <td>19</td> 
  <td>数学 </td>
  <td>60 </td>
  </tr>
  <tr>
  <td>李四 </td>
  <td>女</td>
  <td>19</td> 
  <td>语文 </td>
  <td>60 </td>
  </tr>
  <tr>
  <td>王五 </td>
  <td>男</td>
  <td>19</td> 
  <td>英语 </td>
  <td>60 </td>
  </tr>
</table>
<script >
  var tab=document.getElementById("tab");
  var name="";
  for(var i=0,j=0;i <tab.rows.length;i++,j++) {
  if(name==tab.rows[i].cells[0].innerHTML) {
  tab.rows[i].deleteCell(0)
  } else {
  name=tab.rows[i].cells[0].innerHTML;
  if(i>0)tab.rows[i-j].cells[0].rowSpan=j;
  j=0;
  }
  }
  var name2="";
  for(var i=0,j=0;i <tab.rows.length;i++,j++) {
  if(name2==tab.rows[i].cells[1].innerHTML) {
  tab.rows[i].deleteCell(1)
  } else {
  name2=tab.rows[i].cells[1].innerHTML;
  if(i>0)tab.rows[i-j].cells[1].rowSpan=j;
  j=0;
  }
  }
</script > 
</body>
</html>



对我有用[0] 丢个板砖[0] 引用 举报 管理 TOP 回复次数:17 

liw

(微微)

等 级:

#1楼 得分:0回复于:2009-03-06 09:02:59我已经实现了项目列相同单元格的合并,(项目应该改为姓名)
但怎样将姓名、性别、年龄3列相同的单元格都合并呢?谢谢。 


对我有用[0] 丢个板砖[0] 引用 举报 管理 TOP 精华推荐:纯js网页大型游戏:《神魔对决2-天上的激战》(3.8M),开源发布。

liw

(微微)

等 级:

#2楼 得分:0回复于:2009-03-06 09:14:44要求达到的效果是:
姓名 性别 年龄 科目 分数
  数学 90
张三 男 22 语文 70
  22 英语 60
李四 女 19 数学 60
  语文 60
王五 男 20 英语 60 

姓名列的合并如上面的代码已经实现,但性别和年龄列没搞定,谢谢


对我有用[0] 丢个板砖[0] 引用 举报 管理 TOP 精华推荐:使用CSS3 and jQuery 实现霓虹灯闪烁效果

liw

(微微)

等 级:

#3楼 得分:0回复于:2009-03-06 09:15:53要求达到的效果是:
姓名 性别 年龄 科目 分数
  数学 90
张三 男 22 语文 70
  英语 60
李四 女 19 数学 60
  语文 60
王五 男 20 英语 60

姓名列的合并如上面的代码已经实现,但性别和年龄列没搞定,谢谢


对我有用[0] 丢个板砖[0] 引用 举报 管理 TOP 精华推荐:网站终于被搜索引擎收录了,总结一下我的seo经验。

Free_Wind22

(只接分,不回贴)

等 级:

#4楼 得分:0回复于:2009-03-06 09:50:09不要分开来,一次合并就好

HTML code
<!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=utf-8" />
<title>无标题文档 </title>
</head>

<body>
<table width="100%" border="1" cellspacing="0" cellpadding="0" id="tab">
  <tr>
    <td>张三 </td>
    <td>男 </td>
    <td>22 </td>
    <td>数学 </td>
    <td>90 </td>
  </tr>
  <tr>
    <td>张三 </td>
    <td>男 </td>
    <td>22 </td>
    <td>语文 </td>
    <td>70 </td>
  </tr>
  <tr>
    <td>张三 </td>
    <td>男 </td>
    <td>22 </td>
    <td>英语 </td>
    <td>60 </td>
  </tr>
  <tr>
    <td>李四 </td>
    <td>女 </td>
    <td>19 </td>
    <td>数学 </td>
    <td>60 </td>
  </tr>
  <tr>
    <td>李四 </td>
    <td>女 </td>
    <td>19 </td>
    <td>语文 </td>
    <td>60 </td>
  </tr>
  <tr>
    <td>王五 </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 name, sex, age, count, start;
   
    name = sex = age = "";
    count = 1;
    for(var i=0; i<tab.rows.length; i++){
        if(name == tab.rows[i].cells[0].innerHTML && sex == tab.rows[i].cells[1].innerHTML && age == tab.rows[i].cells[2].innerHTML){
            count++;
        }else{
            if(count > 1){ //合并
                start = i - count;
                tab.rows[start].cells[0].rowSpan = tab.rows[start].cells[1].rowSpan = tab.rows[start].cells[2].rowSpan = count;
                for(var j=start+1; j<i; j++){
                    for(var k=0; k<3; k++){
                        tab.rows[j].removeChild(tab.rows[j].cells[0]);
                    }
                }
                count = 1;
            }
            name = tab.rows[i].cells[0].innerHTML;
            sex = tab.rows[i].cells[1].innerHTML;
            age = tab.rows[i].cells[2].innerHTML;
        }
    }
};
</script>
</body>
</html>





对我有用[0] 丢个板砖[0] 引用 举报 管理 TOP 精华推荐:“如何将16进制码流在html中显示为图片”兼容多个浏览器的方案。

liw

(微微)

等 级:

#5楼 得分:0回复于:2009-03-06 10:04:26Free_Wind22:你的代码不能实现动态数据呀?比如姓名里张三有4个或5个,还是不符合要求,怎么实现动态的呢?
如:
姓名 性别 年龄 科目 分数
张三 男 22 数学 90
张三 男 22 语文 70
张三 男 22 英语 60
张三 男 22 化学 60
李四 女 19 语文 60
王五 男 20 英语 60 


对我有用[0] 丢个板砖[0] 引用 举报 管理 TOP 精华推荐:【分享】深入挖掘document.getElementsByTagName()方法的返回值

Free_Wind22

(只接分,不回贴)

等 级:

#6楼 得分:0回复于:2009-03-06 10:08:03无语,你都没试怎么知道..

你表格是动态的就可以了..


对我有用[0] 丢个板砖[0] 引用 举报 管理 TOP 

liw

(微微)

等 级:

#7楼 得分:0回复于:2009-03-06 10:10:38我试过的,不行呀


对我有用[0] 丢个板砖[0] 引用 举报 管理 TOP 

liw

(微微)

等 级:

#8楼 得分:0回复于:2009-03-06 10:11:59我把第4行的李四改为张三,结果这个张三没合并进去


对我有用[0] 丢个板砖[0] 引用 举报 管理 TOP 

liw

(微微)

等 级:

#9楼 得分:0回复于:2009-03-06 10:15:54我第意思是第1、2、3列合并的单元格数都是动态的,并不一定是相同的一个数,比如第1列合并4个单元格,第2列可能合并3个单元格,第3列可能合并2个单元格,也许是我没说清楚


对我有用[0] 丢个板砖[0] 引用 举报 管理 TOP 

Free_Wind22

(只接分,不回贴)

等 级:

#10楼 得分:0回复于:2009-03-06 10:21:16我这个是这样考虑的,一个班可能有同名的同学.所以要姓名,性别,年龄全部相同才算同一个人,
所以你改第四个的姓名,这不算同一个人.所以没合并进去..


对我有用[0] 丢个板砖[0] 引用 举报 管理 TOP 

liw

(微微)

等 级:

#11楼 得分:0回复于:2009-03-06 10:23:06姓名性别年龄列相同的单元格是动态的
如:
姓名 性别 年龄 科目 分数
张三 男 22 数学 90
张三 男 22 语文 70
张三 男 19 英语 60
张三 女 20 化学 60
李四 女 19 语文 60
王五 男 20 英语 60 


对我有用[0] 丢个板砖[0] 引用 举报 管理 TOP 

liw

(微微)

等 级:

#12楼 得分:0回复于:2009-03-06 10:27:08只要前3列里相同的就合并,比如上面表第1列的4个张三,第2列开始的3个男,接下来的2个女,第3列开始2个22等,要完成这样动态的要求怎样实现?谢谢


对我有用[0] 丢个板砖[0] 引用 举报 管理 TOP 

liw

(微微)

等 级:

#13楼 得分:0回复于:2009-03-06 10:41:41也许我举的例子不是很恰当,不是一个班的同学,反正就是前3列相同的单元格是动态的,但这3列里只要是相同的数据就合并单元格




Free_Wind22

(只接分,不回贴)

等 级:

#15楼 得分:0回复于:2009-03-06 10:49:26上面这个是用隐藏的,也可以用
tab.rows[j].removeChild(tab.rows[j].cells[col]);

来代替

tab.rows[j].cells[col].style.display = "none";

来删除多余的列

分享到:
评论

相关推荐

    javascript合并单元格

    ### JavaScript 合并单元格详解 #### 一、概述 在网页开发中,表格是一种非常常见的数据展示形式。为了使表格中的数据呈现更加美观、合理,我们常常需要对某些单元格进行合并操作。本篇文章将重点介绍如何使用...

    js 合并单元格

    js 合并单元格 只有一个方法 思路清晰 可直接使用 注:此方法为合并某一列的单元格 若合并其他 可在吃方法基础上修改

    js合并单元格 相同内容的单元格合并

    在JavaScript编程中,合并单元格是一项常见的需求,特别是在处理HTML表格时。这通常涉及到优化数据展示,例如在报告或统计中避免重复信息占用过多空间。本文将深入探讨如何使用JavaScript来实现相同内容的单元格合并...

    js 合并单元格2例

    总结,js合并单元格主要通过设置`colspan`和`rowspan`属性实现,而实际操作中,我们还需要结合JavaScript的DOM操作能力来满足动态需求。理解这些基础知识和技巧,能帮助我们在开发中更高效地处理表格数据和布局。

    Javascript导出Excel,自动合并单元格、自动列宽、有进度条

    js导出execl,自动合并单元格,自动增行,增列

    jquery datatable 单元格合并

    通过Datatables的`drawCallback`或`initComplete`事件,在表格渲染完成后合并单元格。遍历预处理得到的合并信息,使用DOM操作修改表格结构。 ```javascript $('#example').DataTable({ // ...其他配置... ...

    vue-easytable合并单元格

    在这个“vue-easytable合并单元格”的主题下,我们将深入探讨如何利用Vue Easytable实现表格中的单元格合并。 在传统的HTML表格中,合并单元格通常使用`&lt;td&gt;`的`colspan`和`rowspan`属性来完成,但在Vue Easytable...

    xlsx-js-style导出Excel,带样式合并单元格边框显示不全和动态插入表头 解决

    xlsx-js-style库在使用纯JavaScript进行Excel导出方面提供了强大的功能,不仅处理了合并单元格的显示问题,还支持动态表头的插入,并允许对导出的Excel文件样式进行自定义。这为开发人员提供了一种灵活、高效的解决...

    JS实现动态修改table及合并单元格的方法示例

    在JavaScript中,动态修改表格(Table)以及合并单元格是常见的需求,特别是在处理数据展示或者报表生成时。以下将详细介绍如何使用JS实现这些功能。 首先,要动态修改表格,我们需要获取表格元素。在HTML中,表格...

    layui table合并单元格.zip

    "layui table合并单元格.zip" 这个压缩包正是提供了关于如何在layui的表格中实现单元格合并的示例和资源。 首先,"layui table.txt" 文件可能包含了layui表格组件的基础用法和API介绍。layui的表格组件支持动态加载...

    列表多行多列合并单元格

    综上所述,实现列表多行多列合并单元格涉及到HTML表格的基本操作,以及JavaScript动态计算和设置`colspan`和`rowspan`属性。在开发过程中,还需要考虑交互性、响应式设计和性能优化,确保在各种环境下都能提供良好的...

    ext表格合并单元格的方法

    在进行Web开发时,特别是在使用Ext JS框架处理表格数据展示的过程中,经常会遇到需要合并单元格的情况。这不仅可以提升数据展示的美观性,还能增强数据的可读性和逻辑性。Ext JS提供了强大的表格组件GridPanel,但...

    将HtmlTable 导出为Execl文件,支持合并单元格、合并行,无需Office支持

    本项目提供了一个解决方案,它支持合并单元格和合并行,无需依赖Microsoft Office,这对于那些无法安装Office环境或者希望在服务器端执行此操作的用户来说,具有很高的实用价值。 首先,我们要理解HTML表格...

    miniui datagrid 合并单元格

    ### MiniUI DataGrid合并单元格方法详解 #### 一、引言 在处理表格数据时,经常需要对具有相同属性的行进行合并显示,以提高数据的可读性和美观度。MiniUI是一款功能强大且易用的企业级前端框架,其DataGrid组件...

    bootstrap-table导出合并单元格

    在描述中提到的"bootstrap-table导出合并单元格"是该插件的一个高级特性,允许用户在导出表格时,将具有相同内容的单元格进行合并,以提高数据的可读性和美观性。 1. **Bootstrap Table简介** Bootstrap Table是一...

    Ext grid合并单元格

    根据提供的文件信息,我们可以深入探讨如何在 Ext JS 中实现 Grid 的单元格合并功能。此案例主要涉及到了自定义 GridView 的 `renderHeaders` 方法来达到单元格合并的目的,并且还涉及了模板(Template)的使用、...

    spreadjs_包含合并单元格的数据绑定-demo.zip

    《SpreadJS:实现合并单元格的数据绑定》 SpreadJS 是一款功能强大的JavaScript表格控件,由葡萄城开发,它提供了一种高效的方式在Web应用中创建、编辑和展示电子表格数据。在这个“spreadjs_包含合并单元格的数据...

    javascript 万能table合并单元格 js版

    只要输入table的id,就可以自动合并单元格,只要上下相邻的单元格相同的,都会合并 html版比较好,点下面的 http://download.csdn.net/source/1276574

    vue合并单元格

    在本篇内容中,我们将深入探讨如何在Vue项目中实现“vue合并单元格”的功能。 首先,让我们了解表格的基本结构。在HTML中,`&lt;table&gt;`元素用于创建表格,而`&lt;tr&gt;`表示行,`&lt;th&gt;`表示表头单元格,`&lt;td&gt;`表示普通数据...

Global site tag (gtag.js) - Google Analytics