使用EL+jstl實現表格隔行換色

使用<c:if>標籤實現隔行換色

要求:使用<c:set>標籤進行變量的設置

使用EL表達式獲取變量值,在使用<c:forEach>和<c:out>標籤實現10行以上表格的輸出(最少兩列,表格內容自定)

1.首先<c:set>與<c:out>的使用:http://www.runoob.com/jsp/jstl-core-set-tag.htmlhttp://www.runoob.com/jsp/jstl-core-out-tag.html (菜鳥教程)
在這裏插入圖片描述

2.直接上jsp代碼(非常少)

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <title>使用El+jstl實現表格隔行換色</title>
</head>
<body>
<c:set var="name" value="李白" scope="page"/>
<c:set var="age" value="${20}" scope="page"/>
<table border="1" style="border-collapse:collapse;">
    <tr>
        <td>姓名</td>
        <td>年齡</td>
    </tr>
    <%--如果有後臺數據使用 items --%>
    <c:forEach begin="1" end="10" step="1" varStatus="stus">
        <%--分開判斷就可以隔行不一樣的顏色--%>
         <c:if test="${stus.count % 2 !=0}">
               <tr bgcolor="#f158ff">
         </c:if>
         <c:if test="${stus.count % 2 ==0}">
               <tr bgcolor="#ff8c00">
         </c:if>
            <td><c:out value="${name}"/></td>
            <td><c:out value="${age}"/></td>
        </tr>
    </c:forEach>
</table>

</body>
</html>


運行結果:
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章