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>
分享到：
相关推荐
在JavaScript编程中，动态添加表格行是一个常见的需求，特别是在数据可视化或者用户交互丰富的网页应用中。这个功能允许我们在用户操作或者接收到服务器数据时，实时地向HTML表格中插入新的行，更新显示的信息。以下...
总结来说，使用JavaScript动态创建和管理表格是一种非常实用且强大的功能，可以帮助开发者根据用户的需求实时调整表格结构。通过上述方法的介绍，你可以更灵活地控制表格的显示效果，提高用户体验。
在这个特定的练习中，我们将探讨如何使用JavaScript动态地生成表格，这对于构建交互式Web应用或者处理动态数据展示是非常有用的。 在描述中提到的博文链接（已省略）可能提供了一个详细的步骤指南或者示例代码，以...
这是一个动态生成表格的 HTML 页面，使用了 JavaScript 动态生成表格内容。这个表格显示了一组学生的成绩信息，包括姓名、科目和得分，并提供了删除操作。 在页面中，先声明了一个 table 元素，并设置了 id 为 ...
标题中的“可写的动态表格”指的是在网页上能够实时编辑的表格组件，它允许用户不仅查看数据，还能直接在表格中进行添加、修改和删除等操作。这种技术在Web应用中非常常见，尤其是在数据管理、报表展示和协作工具中...
JavaScript是一种广泛应用于网页和网络应用开发的脚本语言，它主要负责处理客户端的交互和动态效果。在网页中，表格是一种常见的数据展示方式，而JavaScript则可以为表格增添丰富的交互性和视觉效果。以下是一些关于...
在探讨“javascript表格操作”的知识点时，我们主要聚焦于如何利用JavaScript来动态地操作HTML中的表格元素，包括但不限于创建、删除行或单元格，以及进行数据的排序和汇总。以下是对这一主题的深入解析。 ### 动态...
本篇文章将深入探讨如何使用JavaScript自动添加、删除表格，以及实现窗口居中显示的相关技术。 首先，让我们来理解“JavaScript自动添加表格”。在HTML中，表格由`<table>`元素定义，行(`<tr>`)、列(`<td>`或`<th>`...
JavaScript表格技术在网页开发中扮演着重要角色，尤其是在数据展示和操作方面。标题"javascript 表格列可以拖"指的是JavaScript实现的一种功能，允许用户通过拖动来调整表格列的宽度，以适应不同数据量和用户偏好。...
在网页开发中，JavaScript是一种非常重要的脚本语言，它能够为用户提供动态交互体验。当我们需要在网页上展示数据时，表格是一种常见的呈现方式。而JavaScript实现的表格排序功能则能够帮助用户更方便地管理和理解...
在本文中，我们将探讨如何使用JavaScript实现一个简单的动态表格。动态表格允许用户通过输入数据并点击“添加”按钮将新行添加到表格中，同时提供了删除行的功能。 首先，我们看到HTML部分定义了一个简单的表格结构...
本文将详细讲解如何利用JavaScript、Ajax、JSON以及C#技术，在前端动态地显示各种表格数据。 首先，JavaScript是浏览器端的主要脚本语言，用于处理用户交互、动态内容更新以及与服务器进行异步通信。在本场景中，...
在JavaScript中，动态向表格添加数据是一项常见的任务，特别是在网页交互和数据展示时。这个过程涉及到HTML、CSS以及JavaScript的基本操作，尤其是DOM（文档对象模型）的操作。以下是对标题和描述中所涉及知识点的...
6. 动态生成：通过JavaScript代码动态创建ColumnModel和Store，从而实现表格的动态生成。 通过理解和掌握这些知识点，开发者可以构建出高度灵活、响应式的前端表格应用，同时充分利用后端数据源提供动态内容。
在网页开发中，使用JavaScript来动态改变表格行的颜色是一种常见的技术。这种技术不仅可以提升用户体验，还可以增加网站的交互性。本文将详细介绍如何使用JavaScript来实现这一功能，并探讨一些高级用例。 #### 1. ...
而动态分页则需要JavaScript配合，根据每页显示的行数计算总页数，并在用户切换页码时更新表格内容。分页逻辑通常与后端服务紧密关联，需要通过Ajax请求获取指定页的数据。 最后，我们谈谈排序功能。排序使用户可以...
基于JavaScript的富客户端表格绘制库开发 摘要：本文介绍了一种基于JavaScript的富客户端表格绘制库的开发，旨在解决运维和开发工作中遇到的难题。该库实现了单元格事件绑定、翻页、单元格嵌入复杂模块、锁定表头表...
总结来说，JavaScript动态生成表格是网页开发中常见的一种功能，它通过获取用户输入、构建HTML字符串和操作DOM来实现。理解这个过程有助于开发者创建更复杂、更动态的网页交互效果。通过不断学习和实践，可以进一步...
在IT行业中，动态改变表格内容是一项常见的需求，...综上所述，动态改变表格内容涉及JavaScript的基本操作、事件处理、异步通信和前端框架的应用。理解并掌握这些技术，可以构建出具有高度交互性和实时性的Web应用。
当表格包含的数据过多时，分页能将数据划分为小块，每次只加载和显示一部分，这不仅提高了页面加载速度，也使得用户能够更容易地浏览和管理数据。TinyTable的分页功能通常包括向前、向后翻页，以及跳转到特定页码等...