一种在前端精确合并单元格的最佳算法

先展示一下纵向合并效果,再继续!

《一种在前端精确合并单元格的最佳算法》

要达到精确合并的效果不能只根据第n列各个td的值是否相等做判断,还要判断前n-1列各个td的值是否也相等,算法有点复杂。

为了降低算法的复杂度,我给每个td加了一个name,第n个td的name值由前面n-1个td的值顺序拼接而成;这样合并的时候就只需要判断第n列各个td的name是否相等就可以了。

废话不多说直接上代码,直接套用的时候要多多注意<c:forEach items=”${page.list}” var=”Mf”>

<script type="text/javascript">
		$(document).ready(function() {
			
			uniteTable('contentTable',14);
			
			function uniteTable(tableId,colLength) {
				        //tableId-- 需要合并单元格的表ID
				        //colLength-- 需要合并单元格的列数
						alert(colLength);
				       var tb=document.getElementById(tableId);
				       tb.style.display='';
				        var i = 0;
				        var j = 0;
				        var rowCount = tb.rows.length; //   行数 
				        var colCount = tb.rows[0].cells.length; //   列数 
				        var obj1 = null;
				        var obj2 = null;
				        //为每个单元格命名 
				        for (i = 0; i < rowCount; i++) {
				            for (j = 0; j < colCount; j++) {
				                tb.rows[i].cells[j].id = "tb__" + i.toString() + "_" + j.toString();
				            }
				        }
				        //合并行 
				        for (i = 0; i < colCount; i++) {
				            if (i == colLength) break;
				            obj1 = document.getElementById("tb__0_" + i.toString())
				            for (j = 1; j < rowCount; j++) {
				                obj2 = document.getElementById("tb__" + j.toString() + "_" + i.toString());
				                if (obj1.getAttribute("name") == obj2.getAttribute("name")) {
				                    obj1.rowSpan++;
				                    obj2.parentNode.removeChild(obj2);
				                } else {
				                    obj1 = document.getElementById("tb__" + j.toString() + "_" + i.toString());
				                }
				            }
				        }
				    }
			});
	</script>

	<table id="contentTable" style="word-break: keep-all;white-space:nowrap;" class="table table-striped table-bordered table-condensed">
		<thead>
			<tr>
				<th width="30px">类别</th>
				<th width="50px">事业部</th>
				<th width="50px">地区</th>
				<th width="50px">申请部门</th>
				<th width="90px">投资计划书编号</th>
				<th width="130px">项目名称</th>
				<th width="90px">采购申请</th>
				<th width="50px" >公司代码</th>
				<th width="90px" >采购订单</th>
				<th width="150px" >订单原币金额(元)</th>
				<th width="50px" >发票凭证</th>
				<th width="90px" >发票金额(元)</th>
				<th width="50px" >付款凭证</th>
				<th width="90px" >付款金额(元)</th>
				<th width="110px" >资产号</th>
			</tr>
		</thead>
		<tbody>
		<c:forEach items="${page.list}" var="Mf">
			<tr  height="20px" style="cursor:pointer;" ondblclick ="window.open('${ctx}/mf/Mf/view?id=${Mf.id}','_blank')">
				
				<td name="${Mf.origin}">
					<c:if test="${Mf.origin=='OA'}">已申请</c:if>
					<c:if test="${Mf.origin=='SAP'}">已下单</c:if>
				</td>
				<td name="${Mf.origin}${Mf.division}">
					${Mf.division}
				</td>
				<td name="${Mf.origin}${Mf.division}${Mf.addr}">
					${Mf.addr}
				</td>
				<td name="${Mf.origin}${Mf.division}${Mf.addr}${Mf.dept}">
					${Mf.dept}
				</td>
				<td name="${Mf.origin}${Mf.division}${Mf.addr}${Mf.dept}${Mf.investnum}">
					${Mf.investnum}
				</td>
				<td title="${Mf.investname}" name="${Mf.origin}${Mf.division}${Mf.addr}${Mf.dept}${Mf.investnum}${Mf.investname}">
					${fns:abbr(Mf.investname,20)}
				</td>
				<td name="${Mf.origin}${Mf.division}${Mf.addr}${Mf.dept}${Mf.investnum}${Mf.investname}${Mf.purchaseno}">
					${Mf.purchaseno}
				</td>
				<td name="${Mf.origin}${Mf.division}${Mf.addr}${Mf.dept}${Mf.investnum}${Mf.investname}${Mf.purchaseno}${Mf.companycode}">
					${Mf.companycode}
				</td>
				<td name="${Mf.origin}${Mf.division}${Mf.addr}${Mf.dept}${Mf.investnum}${Mf.investname}${Mf.purchaseno}${Mf.companycode}${Mf.ebeln}">
					${Mf.ebeln}
				</td>
				<td name="${Mf.origin}${Mf.division}${Mf.addr}${Mf.dept}${Mf.investnum}${Mf.investname}${Mf.purchaseno}${Mf.companycode}${Mf.ebeln}${Mf.mfreserve8}">
					<fmt:formatNumber value="${Mf.mfreserve8}" pattern="#,#00"/>
				<td name="${Mf.origin}${Mf.division}${Mf.addr}${Mf.dept}${Mf.investnum}${Mf.investname}${Mf.purchaseno}${Mf.companycode}${Mf.ebeln}${Mf.mfreserve8}${Mf.ebenr}">
					${Mf.ebenr}
				</td>
				<td name="${Mf.origin}${Mf.division}${Mf.addr}${Mf.dept}${Mf.investnum}${Mf.investname}${Mf.purchaseno}${Mf.companycode}${Mf.ebeln}${Mf.mfreserve8}${Mf.ebenr}${Mf.mfreserve5}">
					<fmt:formatNumber value="${Mf.mfreserve5}" pattern="#,#00"/>
				</td>
				<td name="${Mf.origin}${Mf.division}${Mf.addr}${Mf.dept}${Mf.investnum}${Mf.investname}${Mf.purchaseno}${Mf.companycode}${Mf.ebeln}${Mf.mfreserve8}${Mf.ebenr}${Mf.mfreserve5}${Mf.paystate}">
					${Mf.paystate}
				</td>
				
				<td name="${Mf.origin}${Mf.division}${Mf.addr}${Mf.dept}${Mf.investnum}${Mf.investname}${Mf.purchaseno}${Mf.companycode}${Mf.ebeln}${Mf.mfreserve8}${Mf.ebenr}${Mf.mfreserve5}${Mf.paystate}${Mf.mfreserve9}">
					<fmt:formatNumber value="${Mf.mfreserve9}" pattern="#,#00"/>
				</td>
				
				<td name="${Mf.origin}${Mf.division}${Mf.addr}${Mf.dept}${Mf.investnum}${Mf.investname}${Mf.purchaseno}${Mf.companycode}${Mf.ebeln}${Mf.mfreserve8}${Mf.ebenr}${Mf.mfreserve5}${Mf.paystate}${Mf.mfreserve9}${Mf.assetno}">
					${Mf.assetno}
				</td>
				
			</tr>
		</c:forEach>
		</tbody>
	</table>

 

    原文作者:奔跑的小鱼儿
    原文地址: https://blog.csdn.net/welan123123/article/details/82907009
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞