table點選某一行，在改行的下方顯示改行的詳細資訊
阿新 • • 發佈：2019-01-31
實體類Student.java
package com.h3c.itac.domain; import javax.persistence.Column; import javax.persistence.Entity; import javax.persistence.GeneratedValue; import javax.persistence.Id; import javax.persistence.Table; import org.hibernate.annotations.GenericGenerator; @Entity @Table(name="t_student") public class Student { @Id @GenericGenerator(name="generator",strategy="increment") @GeneratedValue(generator="generator") @Column(name="s_id",unique=true,nullable=false) private Integer sId; @Column(name="s_name") private String sName; @Column(name="s_age") private Integer sAge; @Column(name="s_cname") private String sCName;//課程名稱 @Column(name="t_name") private String tName;//老師姓名 @Column(name="s_address") private String sAddress;//住址 @Column(name="s_phone") private String sPhone;//聯絡電話 //getter setter tostring
頁面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>My JSP 'showAllStudent.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <style type="text/css"> #mytable { padding: 0; margin: 0; border-collapse: collapse; } td { border: 1px solid #C1DAD7; background: #fff; font-size: 11px; padding: 6px 6px 6px 12px; color: #4f6b72; } td.alt { background: #F5FAFA; color: #797268; } .noShow { display: none; } </style> </head> <body> <table> <tr> <th>使用者名稱</th> <th>年齡</th> <th>聯絡電話</th> </tr> <c:forEach items="${students}" var="s" varStatus="i" step="1"> <tr onclick="cli${i.index }();"> <td>${s.sName }</td> <td>${s.sAge }</td> <td>${s.sPhone }</td> </tr> <c:out value="aa${i.index }" /> <tr id="aa${i.index }" style="display: none;"> <td colspan="3">使用者詳細資訊<br/> ${s.sName } ${s.sAge } ${s.sPhone } ${s.sCName } ${s.tName } ${s.sAddress } <input type="hidden" value="1" id="count${i.index }"/> </tr> <script type="text/javascript"> function <c:out value="cli${i.index }"/>() { var i = document.getElementById('<c:out value="count${i.index }" />').value; ++i; if (i % 2 == 0) { document.getElementById('<c:out value="aa${i.index }"/>').style.display = "block"; document.getElementById('<c:out value="count${i.index }" />').value=i; } else { document.getElementById('<c:out value="aa${i.index }"/>').style.display = "none"; document.getElementById('<c:out value="count${i.index }" />').value=i; } }; </script> </c:forEach> </table> </body> </html>