JavaScript写动态显示的表格

来源：互联网发布：华为穆斯林知乎编辑：程序博客网时间：2024/06/16 05:07

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" onsubmit="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" onclick="checkAll();"/>  </td>  <td>  <input type="button" id="turn" onclick="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>