JavaScript写动态显示的表格

最新推荐文章于 2024-10-01 19:00:00 发布

DR达仁

最新推荐文章于 2024-10-01 19:00:00 发布

阅读量2.7k

点赞数

分类专栏： JavaScript 文章标签：全选 checkbox javascript 展开收缩

本文链接：https://blog.csdn.net/diaorenxiang/article/details/14007779

版权

JavaScript 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

JavaScript写动态变化的表格

1、任务要求：

在一个界面page1.jsp输入一个数字n（5-15），然后在page2.jsp中显示一个有n行的表格，带有全选和收缩、展开的功能。

page1.jsp

page2.jsp

2. 代码实现

page1.jsp

<%@ 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>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.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.getElementById("input1");
			//alert(num.value);
			if(num.value.length<=0){
				alert("the num length is 0");
				return false;
			}
			if(num.value<5||num.value>15){
				alert("num value should between 5-15!");
				return false;
			}
			for(var i = 0; i < num.value.length; i++){
			
				var param = "0123456789";
			
				if(param.indexOf(num.value.charAt(i)) == -1){
					alert("输入必须为数字");
					num.focus();
					return false;
				}
			}
			return true;;
		}
		
	</script>
  </head>
  
  <body>
  	<form action="end.jsp" id="form1" method="post" οnsubmit="return validate();">
  		please input number(5-15):<input id="input1" name="number" type="text" value=""/><br/>
  		<input type="submit" value="submit">
  	</form>
  	
   
  </body>
</html>

page2.jsp

<%@ 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>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.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">
	-->
	<%
		int num = Integer.parseInt(request.getParameter("number"));
	%>
	<script type="text/javascript">
		function checkAll(){
			var all = document.getElementById("all");
			var checkbox = document.getElementsByName("checkbox");
			if(all.checked){
				for(var i=0;i<checkbox.length;i++){
					checkbox[i].checked = true;
				}
			}else{
				for(var i=0;i<checkbox.length;i++){
					checkbox[i].checked = false;
				}
			}
		}
		
		function turn(){
			var checkbox = document.getElementById("turn");
			var table = document.getElementById("table1");
			
			if(checkbox.value=="收缩"){
				table.style.display = "none";
				table.align="center";
				table.border="1";
				table.width="60%";
				checkbox.value="展开";
			}else if(checkbox.value=="展开"){
				table.style.display = "block";
				checkbox.value="收缩";
			}
		}
	</script>
  </head>
  
  <body>
  <table id="table2" align="center" width="60%" border="1">
  <tr>
  	<td>
  	全选：<input type="checkbox" id="all" οnclick="checkAll();"/>
  	</td>
  	<td>
  	<input type="button" id="turn" οnclick="turn();" value="收缩"/>
  	</td>
  </tr>
  </table>
  	<table align="center" border="1" width="60%" id="table1">
  	<%
  		for(int i=0;i<num;i++){
  	%>
  	<tr>
  		<td>
  			<input type="checkbox" name="checkbox">
  		</td>
  		<td>
  			<%=i %>
  		</td>
  	</tr>
  	<%} %>
  	</table>
  </body>
</html>