一种在前端精确合并单元格的最佳算法
先展示一下纵向合并效果，再继续！
要达到精确合并的效果不能只根据第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>