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>
分享到：
相关推荐
这是一个动态生成表格的 HTML 页面，使用了 JavaScript 动态生成表格内容。这个表格显示了一组学生的成绩信息，包括姓名、科目和得分，并提供了删除操作。 在页面中，先声明了一个 table 元素，并设置了 id 为 ...
用JavaScript实现的动态表格，双击可以实现不同类型的单元格内容的更改，有增删改的更能，可以上传图片，放大图片显示，日历，JavaScript验证等
基于ajax，解决在前端显示各种表格数据的麻烦，包含的技术有json，javascript，C#，ajax等，具体说明在我的博客里有；
主要介绍了JS动态显示表格上下frame的方法,涉及javascript中显示表格frame的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
html前端获取后端js的数据，实现到html表格，并且实现表格分页显示，分页显示原理是要显示那一页数据就从后端获取需要显示页的数据，不会一次性获取全部数据，减小流前端的压力。后端使用js+express，读取csv文件...
最近看了3本o’reilly的书，我们一般称为禽兽书（跟我一同学的名字很像大笑），然后一直想做一个列子来练练手，因为看公司好多用动态表格的，所以，我就试着用js做了动态表格，用firfox浏览器来调试的，因为firbug...
可以实现点击表格的列名来动态的排序，可以根据需求选择每页显示的记录数，
9.24 用JavaScript隐藏或显示表格列 9.25 滚动的表格 9.26 交换表的行 9.27 动态拖放表格的宽度 9.28 可输入内容的表格 9.29 可以分级的表格隐藏 9.30 动态创建表格并实现分页 9.31 删除表格指定行 9.32 设置表格的...
1.动态创建表格 2.表格具有间隔行颜色 3.具有鼠标进过高亮显示 4.可以进行编辑和删除 5.可以全选，全清，反选 6.编辑时可以显示下拉框，单选框和复选框
9.24 用JavaScript隐藏或显示表格列 9.25 滚动的表格 9.26 交换表的行 9.27 动态拖放表格的宽度 9.28 可输入内容的表格 9.29 可以分级的表格隐藏 9.30 动态创建表格并实现分页 9.31 删除表格指定行 9.32 设置表格的...
本文实例为大家分享了Element-ui表格实现树形结构表格的具体代码，供大家参考，具体内容如下 前端效果展示: 在el-table中，支持树类型的数据的显示。当 row 中包含 children 字段时，被视为树形数据。渲染树形...
1.动态创建表格 2.兼容IE和FireFox 3.具有间隔色 4.具有鼠标进过高亮显示功能 5.具有编辑和删除功能,每行附带有编辑和删除按钮 6.具有全选，全清和反选功能
//设置表格属性 _table.setAttribute("border","1"); _table.setAttribute("borderColor","black"); _table.setAttribute("width","200"); //创建一行 for(var i=0;i;i++){ var _tr=_table....
3.使用jQuery完成一个动态的斑马条纹表格：加载后奇数行底色为红色，当鼠标进入表格时奇数行去掉底色，换成偶数行底色为红色，鼠标离开时候回复到原始状态。 4.使用jQuery实现一个网页选项卡功能：点击上方不同的...
在这个功能中，我们首先定义了一个包含数据的二维数组，然后在HTML中生成一个表格来显示这些数据。通过使用JavaScript函数和事件监听器，我们可以实现按钮点击后删除表格中指定行的数据。通过这个功能，我们可以更好...
后台数据写成<root><row 姓名='张三' 年龄='22'/> 前台HTML自动显示成表格了...并且无论表头有多少标题都可以扩展，直接导入进eclipse就能用.....
8.5.5 更改表格间隔背景色 219 第9章 JavaScript中的XML 223 9.1 XML语言 223 9.1.1 XML概述 223 9.1.2 XML文档结构 225 9.1.3 XML标记 226 9.1.4 XML文档元素 226 9.1.5 XML属性 229 9.1.6 XML命名空间 230 9.2 XML...
《JavaScript基础教程(第8版)》循序渐进地讲述了JavaScript及相关的CSS、DOM、Ajax、jQuery等技术。书中从JavaScript语言基础开始，分别讨论了图像、框架、浏览器窗口、表单、正则表达式、用户事件和cookie，并在上...
11.1.html JavaScript写数据到cookie。 11.2.html JavaScript获取cookie信息。 11.3.html JavaScript修改cookie的保存有效期。 11.4.html 保存数据到userData。 11.5.html JavaScript获取...
实例016 动态显示窗口 29 实例017 慢慢放大的窗口 30 实例018 下降式浏览器 32 实例019 旋转的窗口 33 实例020 移动的窗口 34 实例021 震动的窗口 35 实例022 弹出广告窗口 36 1.4 窗口控制 37 实例023 窗口始终在最...