表格合并行

最新推荐文章于 2025-03-23 23:01:33 发布

原创最新推荐文章于 2025-03-23 23:01:33 发布 · 321 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

11 篇文章

订阅专栏

使用<c:forEach>遍历显示表格<tr>时，进行合并行操作

1：表格内容不分页时

		<!-- 收入汇总表 -->
		<div class="tablebox">
			<table
				id="incomeTable" class="table table-bordered table-condensed table-striped table-hover">
				<tbody>
					<tr>
						<td scope="col" style="width:180px">酒店名称</td>
						<td scope="col" style="width:180px">日期</td>
						<td scope="col" style="width:180px">消费合计</td>
					</tr>
					<c:set var="datecount" value="0"></c:set>
					<c:forEach items="${MyIncomeCollectList.incomeCollectList}"
						var="result" varStatus="re">
						<tr>
							<c:if test="${datecount=='0'}">
								<td style="vertical-align: middle" rowspan="${rowCol}" >${result.hotelName}</td>
							</c:if>
							<c:set var="datecount" value="${datecount+1}"></c:set>
							<c:if test="${rowCol==datecount}">
								<c:set var="datecount" value="0"></c:set>
							</c:if>
							<td class="td">${result.createTime}</td>
							<td class="td_amount">${result.incomeSumAccount}</td>
						</tr>
					</c:forEach>
					<tr>
						<td colspan="2">合计</td>
						<td id="sum"></td>
					</tr>
				</tbody>
			</table>
		</div>

2：表格内容需要分页时，分页和合并行会有冲突，导致页面表格的样式出错。不再从<html>代码中进行合并行的处理，采用单独的js方法来进行合并行处理。

<script type="text/javascript">
$(function(){
	merge("incomeTable",0); //incomeTable是table的id,“0”表示对第一列的重复数据进行合并行处理
});

function merge(tableId,col){
    var tr = document.getElementById(tableId);
    for(var i=1; i<tr.rows.length; i++){ //表示数据内容的第二行
        if(tr.rows[i].cells[col].innerHTML == tr.rows[i - 1].cells[col].innerHTML){ //col代表列
            t = i-1;
            while(tr.rows[i].cells[col].innerHTML == tr.rows[t].cells[col].innerHTML){
                tr.rows[i].cells[col].style.display="none";
                if(tr.rows[t].cells[col].rowSpan <= (i-t)){  
                    tr.rows[t].cells[col].rowSpan +=1; //设置前一行的rowspan+1
                    $(tr.rows[t].cells[col]).css({'vertical-align':'middle'});
                }
                i++;
            }
        }               
    }
}
</script>

	    <!-- 收入汇总表 -->
		<div class="tablebox">
			<table
				id="incomeTable" class="table table-bordered table-condensed table-striped table-hover">
				<tbody>
					<tr>
						<td scope="col" style="width:180px">酒店名称</td>
						<td scope="col" style="width:180px">日期</td>
						<td scope="col" style="width:180px">消费合计</td>
					</tr>
					<c:forEach items="${MyIncomeCollectList.incomeCollectList}"
						var="result" varStatus="re">
						<tr>
							<td style="vertical-align: middle" >${result.hotelName}</td>					
							<td class="td">${result.createTime}</td>
							<td class="td_amount">${result.incomeSumAccount}</td>
						</tr>
					</c:forEach>
					<tr>
						<td colspan="2">合计</td>
						<td id="sum"></td>
					</tr>
				</tbody>
			</table>
		</div>

		<!-- 分页 -->
		<div class="flipbox">
			<div style="text-align:right;">${requestScope.pu.style}</div>  <!-- 分页代码用工具类单独封装了 -->
		</div>