Javascript 动态合并table单元格

最新推荐文章于 2023-09-07 16:11:28 发布

开通月富

最新推荐文章于 2023-09-07 16:11:28 发布

阅读量379

点赞数

分类专栏： JavaScript 文章标签： javascript

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文转载自https://blog.csdn.net/tongyiyi/article/details/51159470

1.合并table单元格

$.fn.extend({
        //表格合并单元格，colIdx要合并的列序号，从0开始
        "rowspan": function (colIdx) {
            return this.each(function () {
                var that;
                $('tr', this).each(function (row) {
				if(colIdx=="0"){
				 $('td:eq(' + colIdx + ')', this).filter(':visible').each(function (col) {
                        if (that != null && $(this).html() == $(that).html()) {
                            rowspan = $(that).attr("rowSpan");
                            if (rowspan == undefined) {
                                $(that).attr("rowSpan", 1);
                                rowspan = $(that).attr("rowSpan");
                            }
                            rowspan = Number(rowspan) + 1;
                            $(that).attr("rowSpan", rowspan);
                            $(this).hide();
                        } else {
                            that = this;
                        }
                    });
				}else{
                    $('td:eq(' + colIdx + ')', this).filter(':visible').each(function (col) {
                        if (that != null && $(this).html() == $(that).html() && $(this).siblings().eq(0).html()==$(that).siblings().eq(0).html() ) {
                            rowspan = $(that).attr("rowSpan");
                            if (rowspan == undefined) {
                                $(that).attr("rowSpan", 1);
                                rowspan = $(that).attr("rowSpan");
                            }
                            rowspan = Number(rowspan) + 1;
                            $(that).attr("rowSpan", rowspan);
                            $(this).hide();
                        } else {
                            that = this;
                        }
                    });
					}
                });
            });
        }
    });

2.使用实例

<!DOCTYPE html>
<html>
<head><title>
	表格单元格合并Demo
</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
	$.fn.extend({
        //表格合并单元格，colIdx要合并的列序号，从0开始
        "rowspan": function (colIdx) {
            return this.each(function () {
                var that;
                $('tr', this).each(function (row) {
				if(colIdx=="0"){
				 $('td:eq(' + colIdx + ')', this).filter(':visible').each(function (col){
                        if (that != null && $(this).html() == $(that).html()) {
                            rowspan = $(that).attr("rowSpan");
                            if (rowspan == undefined) {
                                $(that).attr("rowSpan", 1);
                                rowspan = $(that).attr("rowSpan");
                            }
                            rowspan = Number(rowspan) + 1;
                            $(that).attr("rowSpan", rowspan);
                            $(this).hide();
                        } else {
                            that = this;
                        }
                    });
				}else{
                    $('td:eq(' + colIdx + ')', this).filter(':visible').each(function (col) {
                        if (that != null && $(this).html() == $(that).html() && $(this).siblings().eq(0).html()==$(that).siblings().eq(0).html() ) {
                            rowspan = $(that).attr("rowSpan");
                            if (rowspan == undefined) {
                                $(that).attr("rowSpan", 1);
                                rowspan = $(that).attr("rowSpan");
                            }
                            rowspan = Number(rowspan) + 1;
                            $(that).attr("rowSpan", rowspan);
                            $(this).hide();
                        } else {
                            that = this;
                        }
                    });
					}
                });
            });
        }
    });
 

  

 function initLoad() {
        
          $("#tbListTM").rowspan(0); //第一列合并
          $("#tbListTM").rowspan(1);//第二列合并
          
        }
$(document).ready(function () {
		  var data1=[{"DEPT_NAME":"市场部","WEI":"21","XIU":"2","ZHAN":"0.09"},
{"DEPT_NAME":"市场部","WEI":"21","XIU":"1","ZHAN":"0.05"},
{"DEPT_NAME":"研发部","WEI":"21","XIU":"1","ZHAN":"0.11"},
{"DEPT_NAME":"研发部","WEI":"21","XIU":"1","ZHAN":"0.25"},
{"DEPT_NAME":"产品部","WEI":"3","XIU":"0","ZHAN":"0"},
{"DEPT_NAME":"产品部","WEI":"3","XIU":"0","ZHAN":"0"}]

 
function jizhunchelue(data1) {

    var tbodyHtml="";
    //循环
    
        for (var i = 0; i < data1.length; i++) {
            html = '<tr>\n' +
                '\t\t\t<td colspan="">'+data1[i]['DEPT_NAME']+'</td>\n' +
                '\t\t\t<td>'+data1[i]['WEI']+'</td>\n' +
                '\t\t\t<td>'+(data1[i]['XIU'])+'</td>\n' +
                '\t\t\t<td>'+(data1[i]['ZHAN'])+'</td>\n' +
				'\t\t\t<td>'+(data1[i]['ZHAN'])+'</td>\n' +
                '\t\t</tr>\n';
				tbodyHtml+=html;
        }
   $("#tbListTM").html(tbodyHtml);
}
initLoad();
});
		
    </script>
    <style>
        .Nlist_con table {
            border-left: 1px solid #c9c9c9;
            border-top: 1px solid #c9c9c9;
            border-collapse: collapse;
        }
 
            .Nlist_con table th {
                border-right: 1px solid #c9c9c9;
                border-bottom: 1px solid #c9c9c9;
                background: #ececec;
                padding: 10px 5px;
                font-size: 14px;
                color: #2586d8;
                font-family: "宋体";
            }
 
            .Nlist_con table td {
                border-right: 1px solid #c9c9c9;
                border-bottom: 1px solid #c9c9c9;
                background: #fff;
                padding: 6px 3px;
                font-size: 12px;
                line-height: 20px;
                color: #676767;
            }
 
                .Nlist_con table td a {
                    text-decoration: none;
                    color: #2586d8;
                    cursor: pointer;
                }
 
                    .Nlist_con table td a:hover {
                        text-decoration: underline;
                        color: #2586d8;
                    }
 
    </style>
</head>
<body>
    <div class="Nlist_con">
        <table border="1" cellspacing="1" cellpadding="0" width="100%" id="tbListTM">
            <tr align="center">
                <th>
                    发展领域
                </th>
                <th>
                    发展要素
                </th>
                <th style="width:60px">
                    年度
                </th>
                <th style="width:100px">
                    评价内容
                </th>
                <th>
                    分值
                </th>
            </tr>
			<tbody></tbody>
        </table>
 
    </div>
 
</body>
</html>

3.效果图

开通月富

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Javascript 动态合并table单元格

本文转载自https://blog.csdn.net/tongyiyi/article/details/511594701.合并table单元格$.fn.extend({ //表格合并单元格，colIdx要合并的列序号，从0开始 "rowspan": function (colIdx) { return this.each(func...
复制链接

扫一扫