js合并table单元格(拼table的时候并不知道具体几行几列)

Sys.Application.add_load(function () {

    var tab = document.getElementById("ctl00_ContentPlaceHolder1_viewcontrolTT_Repeater1_ctl00_viewcontrolTT_grid"); //要合并的tableID
    if (!tab) {
        alert("未获取到表格!");
    }
    else {
        //从第二行开始,排除标题行
        var startRow = 1;
        //循环记录表格中td的内容,用来判断td中的value是否发生了改变
        var td1TempV = "";
        var td2TempV = "";
        var td3TempV = "";
        //如果td的值相同,那么变量加1, 否则将临时变量加入集合中
        var rowCount1 = 1;
        var rowCount2 = 1;
        var rowCount3 = 1;
        //得到相同内容的行数的集合www.2cto.com
        var totalcount1 = new Array();
        var totalcount2 = new Array();
        var totalcount3 = new Array();
        for (var i = 1; i < tab.rows.length; i++) {
            //首先拿出来td的值
            var td1Text = tab.rows[i].cells[0].innerText;
            var td2Text = tab.rows[i].cells[1].innerText;
            var td3Text = tab.rows[i].cells[2].innerText;

            //如果是第一次走循环,直接continue;
            if (i == startRow) {
                td1TempV = td1Text;
                td2TempV = td2Text;
                td3TempV = td3Text;
                continue;
            }
            //如果当前拿出来的值和出处的值相同,那么将临时数量加1,否则添加到集合里面
            if (td1TempV == td1Text && td1Text != null && td1Text != "") {
                rowCount1++;
            } else {
                totalcount1.push(rowCount1);
                td1TempV = td1Text;
                rowCount1 = 1;
            }

            if (td2TempV == td2Text && td2Text != null && td2Text != "") {
                rowCount2++;
            } else {
                totalcount2.push(rowCount2);
                td2TempV = td2Text;
                rowCount2 = 1;
            }

            if (td3TempV == td3Text && td3Text != null && td3Text != "") {
                rowCount3++;
            } else {
                totalcount3.push(rowCount3);
                td3TempV = td3Text;
                rowCount3 = 1;
            }

            //判断是否是循环的最后一次,如果是最后一次那个直接将当前的数量存储到集合里面
            if (i == tab.rows.length - 1) {
                totalcount1.push(rowCount1);
                totalcount2.push(rowCount2);
                totalcount3.push(rowCount3);
            }
        }
        //临时变量,再循环中判断是否和数组中的一项值相同
        var tNum1 = 0;
        var tNum2 = 0;
        var tNum3 = 0;
        //注意这个循环是倒着来的
        for (var i = tab.rows.length - 1; i >= startRow; i--) {
            //临时变量,存储td
            var tTd1 = tab.rows[i].cells[0];
            var tTd2 = tab.rows[i].cells[1];
            var tTd3 = tab.rows[i].cells[2];
            tNum1++;
            tNum2++;
            tNum3++;
            if (tab.rows.length == 2) {
                continue;
            }
            //如果发现tNum和数组中最后一个值相同,那么就可以断定相同的td已经结束[只是其中一个]
            if (tNum1 == totalcount1[totalcount1.length - 1]) {
                //给当前td添加rowSpan属性
                tTd1.setAttribute("rowSpan", totalcount1[totalcount1.length - 1]);
                tTd1.setAttribute("style", "background-color:#ffffff");
                //将数组的最后一个元素弹出
                totalcount1.pop();
                tNum1 = 0;
            } else {
                //删除当前td
                tab.rows[i].removeChild(tTd1);
            }

            if (tNum2 == totalcount2[totalcount2.length - 1]) {
                //给当前td添加rowSpan属性

                tTd2.setAttribute("rowSpan", totalcount2[totalcount2.length - 1]);
                tTd2.setAttribute("style", "background-color:#ffffff");
                //将数组的最后一个元素弹出
                totalcount2.pop();
                tNum2 = 0;
            } else {
                //删除当前td
                tab.rows[i].removeChild(tTd2);
            }

            if (tNum3 == totalcount3[totalcount3.length - 1]) {
                //给当前td添加rowSpan属性
                tTd3.setAttribute("rowSpan", totalcount3[totalcount3.length - 1]);
                tTd3.setAttribute("style", "background-color:#ffffff");
                //将数组的最后一个元素弹出
                totalcount3.pop();
                tNum3 = 0;
            } else {
                //删除当前td
                tab.rows[i].removeChild(tTd3);
            }
        }
    }
});

时间: 2024-08-01 07:08:50

js合并table单元格(拼table的时候并不知道具体几行几列)的相关文章

js合并table单元格实例

这里展示js合并table的单元格,代码亲测可行 后台采用springmvc搭建 Record实体类 public class Record {     public String isp;     public String large_area;     public String province;     public String name;     public String age;       ......   //省略get和set方法  } action方法         

jquery实现的拖动可以调整table单元格大小代码实例

jquery实现的拖动可以调整table单元格大小代码实例: 本章节介绍一下如果利用jquery实现表格单元格可以通过鼠标拖动调整大小的效果,当然如果让我们完全写代码的话,可能会比较的复杂,不过有现成的插件可以使用,只要简单的几个步骤就可以实现我们的要求. 一.引入相关库文件: 要使用相关插件,那就必须要引入相关的代码文件,如下: <script src="/js/jquery-1.8.0.min.js" type="text/javascript">&

Firefox下table单元格td设计relative定位失效解决方案(转)

问题描述: 默认情况下,table的单元格td的display为table-cell,在IE 给td设置position:relative,然后给它包含的一个容器使用position:absolute进行定位是有效的,但在FF下却不可以. 但是在IE下,position:absolute的容器的z-index总是比td的z-index低,td层总是在 position:absolute的容器的上面 发生条件: 1. IE6.IE7.IE8和FF浏览器 2. 使用td默认样式,设置td的posit

table单元格设置细边框

设置table的CSS为{border-collapse:collapse;border:none;}, 再设置td的CSS为{border:solid #000 1px;}, <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&qu

为每一个table单元格设置不同的背景颜色

为每一个table单元格设置不同的背景颜色: 本章节介绍一下如何给表格的每一个单元格设置一个背景颜色,当然这里的方法比较笨拙,主要面向初学者. 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <tit

JavaScript提高:004:JS获取Gridview单元格时层级问题

使用javascript获取页面中元素的属性,或者对元素进行操作.这种使用是非常多的.不过对于获取那些在页面中单一的元素,诸如,页面上的某个文本框,下拉列表,按钮等可以直接用ID获取到的这种元素,用法自然简单.这里就不多说了,太简单了.一般比较复杂的是,获取元素中的元素,比如动态生成的那些元素.这里就拿表格中的元素为例吧.知道如何获取表格中的单元格内的元素了,其他的复杂元素也就不在话下了.下面举个简单的例子,获取GridView的单元格元素.平常使用比较多的也就是这种的.行中有个操作按钮,然后对

CSS+JS鼠标悬停单元格变色

又一款鼠标悬停表格单元格,表格变色的实例效果,运用了CSS和JS两者技术的结合,因些兼容性非常好,而且易于控制,代码修改方便,跟表格读取动态数据没有任何关系,比较方便. <html><head><title>鼠标悬停单元格变色</title><meta http-equiv="content-Type" content="text/html;charset=gb2312"><style type=&q

datawindow合并相同单元格

在dataobject菜单rows--->supress repeating values找到要合并的列 缺陷:不能实现居中的功能! datawindow合并相同单元格,布布扣,bubuko.com

Dev GridControl,GridView 显示多行文本及合并相同单元格

显示多行文本的方法 首先把gridcontrol的views的Optionsview里的RowAutoHeight设置为True 在In-place Editor Repository 里添加 MemoEdit控件 在Columns里选择对应的列,在ColumnEdit里选择MemoEdit控件 合并相同单元格的方法 1:设置OptionsView.AllowCellMerge 为 True 此时所有列的相邻行的相同单元格都会合并 2:如部分列不需要自动合并功能 ,只需设置指定列的 Option

利用jxl读取excel合并的单元格的一个小例子

工作中我们可能要把Excel文件的记录保存到数据库, 今天我用jxl读取Excel文件时遇到了合并格的问题,记录如下: 如Excel文件如下: 读取出来的记录为: 由上图可以看出,合并的单元格只有第一次输出了,这样的话,在保存数据 到数据库时就会有数据遗漏,所以做了一定的改造,代码如下: package temp; import java.io.File; import java.io.IOException; import jxl.Range; import jxl.Sheet; import