javascript 动态表格的创建

最新推荐文章于 2025-07-18 11:48:46 发布

原创最新推荐文章于 2025-07-18 11:48:46 发布 · 746 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html

javascript基础部分学习专栏收录该内容

51 篇文章

订阅专栏

本文介绍了一个使用JSP技术实现的简单Web应用案例，包括前端表单输入验证及后端动态生成表格的功能。该应用允许用户输入一个数字（范围5-15），并据此生成相应数量的表格行。同时，页面还实现了全选功能和表格显示的收缩展开效果。

<%@ 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>