使用原生js+jquery 对加载好的表格进行部分列的合并

最新推荐文章于 2023-03-09 17:53:32 发布

qq_25877301

最新推荐文章于 2023-03-09 17:53:32 发布

阅读量1.8k

点赞数

分类专栏： javascript 文章标签： html jquery javascript 合并 jQgrid

本文链接：https://blog.csdn.net/qq_25877301/article/details/50854981

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在html中的表格加载好以后，对部分具有相同值，需要合并的制定单元格进行合并
jqgrid中
jqGrid.createJqGrid({
…，
…，
loadComplete : function(){
//加载数据完成
combinetable(“gridTable”,2,3,4,8,9,10,11);
},
}）
先来效果图：
点击前：
这里写图片描述
点击后：

说明：
combineCell(tableId,refIndex)；
combineCell(‘table1’,0,3,4,5)
tableI—–表格Id
0———–参考列index 此时是Id列
3,4,5——-要合并的列的index

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script language="javascript" src="./JS/jquery-1.11.3.min.js"></script>
    <style type="text/css">


    </style>
    <script type="text/javascript">

        /*
         tableId--要合并的表格
         refIndex--参考数据所在的列index
         第三个包括以后的参数直接写在后面

         */
        function combineCell(tableId,refIndex){

            var agrSize=arguments.length;//得到参数个数
            var indexArray=new Array();
            for(i=2;i<agrSize;i++){
                indexArray.push(arguments[i]);
            }

            var trArray=new Array();
            $("#"+tableId+" tr").each(function(){
                var trObj=this;
                var text=trObj.childNodes[refIndex].innerHTML;

                if(trArray.length>0){
                    var flag=-1
                    for(i=0;i<trArray.length;i++){
                        if(trArray[i][0].childNodes[refIndex].innerHTML==text){
                            flag=i;
                        }
                    }
                    if(flag!=-1){
                        trArray[flag].push(trObj);
                    }else{
                        trArray.push(new Array(trObj));
                    }
                }else{
                    trArray.push(new Array(trObj));
                }
            })
            $("#"+tableId).empty();
            for(j=0;j<trArray.length;j++){
                var t=trArray[j];//得到行对象(可能有多个行)
                if(t.length==1){
                    $("#"+tableId).append($(t))
                }else{

                    for(k=0;k< t.length;k++){
                        if(k==0){
                            for(l=0;l<indexArray.length;l++){
                                $(t[k].childNodes[indexArray[l]]).attr("rowspan",t.length)
                            }


                        }
                        else{
                            for(l=0;l<indexArray.length;l++){
                                $(t[k].childNodes[indexArray[l]]).hide();
                            }

                        }
                    }
                    $("#"+tableId).append($(t))
                }}
        }


    </script>
</head>
<body>
<table id="table1" border="1" style="border-collapse: collapse; border: 1px solid #cbcbcb;
            text-align: center;">
    <tr id="5"><th style="text-align:left;display:none;">id</th><th>name</th><th>age</th><th>height</th><th>weight</th><th>sex</th></tr>
    <tr id="3"><td style="text-align:left;display:none;">2</td><td>02</td><td>02</td><td>03</td><td>04</td><td>05</td></tr>
    <tr id="6"><td style="text-align:left;display:none;">1</td><td>11</td><td>11</td><td>22</td><td>33</td><td>44</td></tr>
    <tr id="4"><td style="text-align:left;display:none;">2</td><td>02</td><td>02</td><td>03</td><td>04</td><td>05</td></tr>
</table>
<button onclick="combineCell('table1',0,3,4,5)">点击我</button>
</body>
</html>
</html>

qq_25877301

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用原生js+jquery 对加载好的表格进行部分列的合并

在html中的表格加载好以后，对部分具有相同值，需要合并的制定单元格进行合并先来效果图：点击前：点击后：说明： combineCell(tableId,refIndex)； combineCell(‘table1’,0,3,4,5) tableI—–表格Id 0———–参考列index 此时是Id列
复制链接

扫一扫

专栏目录