forEach循环实现卡片列表-阿里云开发者社区

forEach循环实现卡片列表

2023-11-13 26

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： forEach循环实现卡片列表

jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en">
<head>
<%
    String path = request.getRequestURI();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path;
%>
<base href="<%=basePath%>">
<title>监测看板</title>
<link rel="stylesheet" type="text/css" href="../../css/board/board.css" />
</head>
<body>
    <div class="page-content-wrapper">
            <div class="row cardcotain" id="par">
            <c:forEach var="ls" items="${list }">
                <div class=" card">
                    <div class="row">
                        <div class="img">
                            <img id="photo" src="${ls.headUrl }" />
                        </div>
                    </div>
                    <div class="row">
                        <div class="name">
                            姓名:<span>${ls.name }</span>
                        </div>
                    </div>
                    <div class="row">
                        <div class="sex">
                            性别:<span>
                            <c:if test="${ls.sex == 1}">男</c:if>
                            <c:if test="${ls.sex == 2}">女</c:if>
                            </span>
                        </div>
                    </div>
                    <div class="row">
                        <c:if test="${ls.bed == 2 }">
                            <div class="orgin">
                                心率:<span> -- </span>
                            </div>
                        </c:if>
                        <c:if test="${ls.bed == 1 }">
                            <div class="orgin">
                                心率:<span>${ls.heart }</span>
                            </div>
                        </c:if>
                    </div>
                    <div class="row">
                        <c:if test="${ls.bed == 2 }">
                            <div class="orgin">
                                呼吸:<span> -- </span>
                            </div>
                        </c:if>
                        <c:if test="${ls.bed == 1 }">
                            <div class="orgin">
                                呼吸:<span>${ls.breath }</span>
                            </div>
                        </c:if>
                    </div>
                    <div class="row">
                        <c:if test="${ls.bed == 2 }">
                            <div class="orgin">
                                体动:<span> -- </span>
                            </div>
                        </c:if>
                        <c:if test="${ls.bed == 1 }">
                            <div class="orgin">
                                体动:<span>${ls.motion }</span>
                            </div>
                        </c:if>
                    </div>
                </div>
                </c:forEach>
            </div>
    </div>
    <script type="text/javascript" src="../../js/com/jquery-1.9.1.js" /></script>
    <script type="text/javascript" src="../../js/board/board.js" /></script>
    <script src="../../common/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

var path = getContextPath();
$(function() {
})
// 获取项目路径
function getContextPath() {
    var currentPath = window.document.location.href;
    var pathName = window.document.location.pathname;
    var pos = currentPath.indexOf(pathName);
    var localhostPath = currentPath.substring(0, pos);
    var projectName = pathName
            .substring(0, pathName.substr(1).indexOf('/') + 1);
    return (localhostPath + projectName);
}

forEach循环实现卡片列表

热门文章

最新文章

相关电子书