JSP+jstl如何正确渲染订单页面

成果图：

如何显示一条订单包含多条商品信息，以及最后一列“总价”如何合理显示。分两步看

1. 显示一条订单包含多条商品信息

先看一个例子

<table border="1">
    <tr>
        <th>列1</th><th>列2</th><th>列3</th><th>列4</th><th>列5</th>
    </tr>
    <tr>
        <td>行1</td><td>行1</td><td>行1</td><td>行1</td><td>行1</td>
    </tr>
    <tr>
        <td>行2</td><td>行2</td><td>行2</td><td>行2</td>
        <td rowspan="2">行2</td>
    </tr>
    <tr>
        <td>行3</td><td>行3</td><td>行3</td><td>行3</td><td>行3</td>
    </tr>
</table>

假设“行1”代表订单1，“行2“和”行3“代表订单2（包含两条商品信息）

如图，可以看到rowspan属性，是默认“向下合并”，而且我不知道可否改成向上合并。 colspan是“向右合并“（也即这两属性都是放在前面）

这就导致了我在循环渲染表格时，在渲染那条订单的第一个商品信息时（如图中“行2”，就需要确定rowspan的值。如下，在内层循环（渲染一条订单的多条商品信息）第一次就确定rowspan值

<c:if test="${s.index == 0}">
    <td class="gross-td" rowspan="${orderCombine.value.goodsNos.size()}"></td>
</c:if>

2.最后一列“总价”如何合理显示

当时真的费脑筋，网上又搜不到，最后想到了用“临时元素”存放总价格（后来才知道这其实叫“隐藏元素”）

<table>
    <tr>
        <th>宝贝</th>
        <th>单价</th>
        <th>数量</th>
        <th>总价</th>
    </tr>
    <c:forEach items="${orderComMap}" var="orderCombine">
        <tr class="total-tr">
            <td>
                ${orderCombine.value.orderTime}
                &nbsp;&nbsp;订单编号：${orderCombine.value.orderId}
            </td>
<%--            单价、数量、总价 三栏合并--%>
            <td colspan="3"></td>
        </tr>
        <c:set var="totalPrice" value="${0}"/>
        <c:forEach items="${orderCombine.value.goodsNos}" var="goodsNo" varStatus="s">
            <tr class="content-tr">
                <td class="img-td">
                    <img src="images/${goodsMap.get(goodsNo).goodsImg}" />
                    <span class="word-sapn">
                        <span>${goodsMap.get(goodsNo).goodsName}</span>
                        <span>${goodsMap.get(goodsNo).manufacturer}</span>
                    </span>
                </td>
                <td>${goodsMap.get(goodsNo).nowPrice}</td>
                <td>${orderCombine.value.buyNums.get(s.index)}</td>
<%--                暂存totalPrice--%>
                <c:set var="totalPrice" value="${totalPrice+goodsMap.get(goodsNo).nowPrice * orderCombine.value.buyNums.get(s.index)}"/>
                <c:if test="${s.index == 0}">
<%--                    如果这样他只渲染一次，价格只算了一个--%>
<%--                    <td class="gross-td" rowspan="${orderCombine.value.goodsNos.size()}">${totalPrice}</td>--%>
                    <td class="gross-td" rowspan="${orderCombine.value.goodsNos.size()}"></td>
                </c:if>
<%--                临时元素：最后一次再渲染临时元素，总价正确，然后通过js将值填入“总价”单元格--%>
                <c:if test="${s.last}">
                    <td class="temp-td">${totalPrice}</td>
                </c:if>
            </tr>
        </c:forEach>
    </c:forEach>
​
</table>

head元素中的script（通过js将临时元素的值填入“总价”单元格）：

<script type="text/javascript">
    window.onload = function () {
        var tempTds = document.querySelectorAll(".temp-td");
        var grossTds = document.querySelectorAll(".gross-td");
        grossTds.forEach(function (item,index) {
            item.innerHTML = tempTds[index].innerHTML;
        })
    }
</script>

临时元素：

.temp-td {
    display: none;
}

解析：

1）这个c:set用于存放totalPrice的值

<%-- 暂存totalPrice--%>
<c:set var="totalPrice" value="${totalPrice+goodsMap.get(goodsNo).nowPrice * orderCombine.value.buyNums.get(s.index)}"/>

2）这里用于在一条订单的第一个商品渲染时 合并单元格（为什么只能在第一个商品时渲染，原因见上方例子）

<c:if test="${s.index == 0}">
    <td class="gross-td" rowspan="${orderCombine.value.goodsNos.size()}"></td>
</c:if>

注意这里td不能直接渲染总价（这样他只渲染一次，总价只算了第一个商品）：

<td class="gross-td" rowspan="${orderCombine.value.goodsNos.size()}">${totalPrice}</td>

3）这是临时元素，只在一条订单的最后一个商品时渲染（保证总价正确）

<%-- 最后一次再渲染临时元素，总价正确，然后通过js将值填入“总价”单元格--%>
<c:if test="${s.last}">
    <td class="temp-td">${totalPrice}</td>
</c:if>