<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'begain.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">
-->
<script type="text/javascript">
function validate(){
var num = document.getElementsByName("number")[0];
if(parseInt(num.value)<5||parseInt(num.value)>15){
num.value = 10;
}
if(num.value.length<1){
alert("输入不能为空！！");
num.focus();
return false;
}
return true;
}
</script>
</head>
<body>
<form action = "end.jsp" name = "form1" method = "post" onsubmit ="return validate();">
请输入数字（5-15）<input type = "text" name = "number" size ="12">
<input type = "submit" value = "submit">
</form>
</body>
</html>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'end.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">
-->
<!-- 全选 收缩 展开 的相关功能的实现
相关知识点的说明：通过name获得对象的方法是getElementsByName("name");它获得的可以不止一个对象。
getElementsByName("name")[0];得到的是重名中的第一个对象
通过id获得对象的方法是getElementById("id");因为id是唯一的，所以它获得的对象也是唯一的。
如果操作的数据是多个，则用name获得对象，如果是一个则用id获得对象。
-->
<script type="text/javascript">
function checkAll(){
var m = document.getElementById("all");//获得对象
var s = document.getElementsByName("check");
if(m.checked){//如果点击了全选执行下面的方法
for(var i = 0;i<s.length; i++){
s[i].checked = true;//改变各个复选框的状态
}
}else{
for(var i = 0;i<s.length; i++){
s[i].checked = false;//改变各个复选框的状态
}
}
}
function turn(){
var m = document.getElementById("change");
var t = document.getElementById("table");
if(m.value == "收缩"){
t.style.display = "none";//css中的属性
m.value = "展开";//改变按钮的名字
}else{
t.style.display = "block";//css中的属性
m.value = "收缩";//改变按钮的名字
}
}
</script>
</head>
<body>
<table border = "1" align = "center" width = "60%" id = "table2">
<tr>
<td><input type = "checkbox" id = "all" onclick = "checkAll();">全选</td>
<td><input type = "button" value = "收缩" id = "change" onclick = "turn();"></td>
</tr>
</table>
<% int number = Integer.parseInt(request.getParameter("number")); %>
<table border = "1" align = "center" width = "60%" id = "table">
<% for(int i=1;i<number;i++){ %>
<tr>
<td><input type = "checkbox" name = "check"></td>
<td><%= i %></td>
</tr>
<% } %>
</table>
</body>
</html>
本文介绍了一个使用JSP技术实现的简单Web应用案例，包括前端表单输入验证及后端动态生成表格的功能。该应用允许用户输入一个数字（范围5-15），并据此生成相应数量的表格行。同时，页面还实现了全选功能和表格显示的收缩展开效果。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
