table点击某一行，在改行的下方显示改行的详细信息

最新推荐文章于 2025-05-21 15:58:32 发布

爱上冬日暖阳

最新推荐文章于 2025-05-21 15:58:32 发布

阅读量1k

点赞数

本文链接：https://blog.youkuaiyun.com/qq931399960/article/details/45391817

版权

博客内容涉及使用Java实现，通过点击表格中特定行，在该行下方动态显示所选行的详细信息，可能涉及到前端交互与后端数据获取。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实体类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 οnclick="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>