jquery 动态合并表格

最新推荐文章于 2019-07-23 20:59:19 发布

蓝色小棉袄

最新推荐文章于 2019-07-23 20:59:19 发布

阅读量1k

点赞数

分类专栏： Jquery 文章标签： Jquery 合并

本文链接：https://blog.csdn.net/axl1988713/article/details/19560407

版权

Jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

//这段jquery代码是在网上找到的，自己的改动比较小，但是，经过改动之后，符合了自己的需求，记下，以备后用

<script type="text/javascript">
//根据第一列的某几行相同，合并对应行的某列
jQuery.fn.rowspan = function(colIdx) {
    return this.each(function() {
        var that;
        $('tr', this).each(function(row) {
            $('td:eq(' + colIdx + ')', this).filter(':visible').each(function(col) {
		//重点在这句话，根据name的不同来合并if (that != null && $(this).attr('name') == $(that).attr('name')) {
		//如果需要根据本列相同来合并需要改成if (that != null && $(this).html() == $(that).html()) {
                if (that != null && $(this).attr('name') == $(that).attr('name')) {
                    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;
                }
            });
        });
    });
}


$(document).ready(function(){ 
  uniteTable(tb1,8);
});

///   
//  功能：合并表格   
//  参数：tb－－需要合并的表格ID   
//  参数：colLength－－需要对前几列进行合并，比如，   
//  想合并前两列，后面的数据列忽略合并，colLength应为2   
//  缺省表示对全部列合并 
//兼容IE FF
///   
function   uniteTable(tb,colLength){
//   检查表格是否规整   
if   (!checkTable(tb))   return;
	    $("#tb1").rowspan(0);//合并第一列
	    $("#tb1").rowspan(3);//合并第二列
	    $("#tb1").rowspan(5);//合并第四列
}    
/   
//  功能：检查表格是否规整   
//  参数：tb－－需要检查的表格ID   
/   
function   checkTable(tb){   
if   (tb.rows.length==1)   return   false; 
if   (tb.rows[0].cells.length==0)   return   false; 
for   (var   i=0;i<tb.rows.length;i++){   
if   (tb.rows[0].cells.length   !=   tb.rows[i].cells.length)   return   false;   
}   
return   true;   
}
</script>

<table class="table" style="width:100%;" layoutH="155" id="tb1">
			<thead>
				<tr>
					<th width="15%" align="center" >企业名称</th>
					<th width="15%" align="center" >监控点名称</th>
						<th width="10%" align="center">
							COD总量(kg)
						</th>
						<th width="10%" align="center">
							企业COD总量(kg)
						</th>
						<th width="10%" align="center">
							氨氮总量(kg)
						</th>
						<th width="10%" align="center">
							企业氨氮总量(kg)
						</th>
					<th width="10%" align="center">
						流量(m3/h)
					</th>
				</tr>
			</thead>
			<tbody>
				<c:forEach var="resultList" items="${page.result }">
					<tr>
						<td width="15%" align="left" name="${resultList.ENTERPRISE_NAME}">${resultList.ENTERPRISE_NAME}</td>
						<td width="15%" align="left" >${resultList.MON_NAME}</td>
						<td align="center" >${resultList.COD_PFL}</td>
						<td align="center"  name="${resultList.ENTERPRISE_NAME}">${resultList.ENT_COD_PFL}</td>
						<td align="center" >${resultList.NHN_COU}</td>
						<td align="center"  name="${resultList.ENTERPRISE_NAME}">${resultList.ENT_NHN_COU}</td>
						<td width="10%">${resultList.BGLL == null ? 0 : resultList.BGLL}</td>
					</tr>
				</c:forEach>
			</tbody>
		</table>