`
- 浏览:
275648 次
- 性别:
- 来自:
苏州
-
- <%@ page language="java" import="java.util.*" pageEncoding="GB2312"%>
- <%
- String path = request.getContextPath();
- String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
- %>
-
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <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">
- <!-- 淡入淡出的样式 -->
- <style type="text/css">
- <!--
- .trans_msg
- {
- filter:alpha(opacity=100,enabled=1) revealTrans(duration=.2,transition=1) blendtrans(duration=.2);
- }
- -->
- </style>
- <script type="text/javascript">
-
- var rT=true;
- var bT=true;
-
- var endaction=false;
-
- var ns4 = document.layers;
- var ns6 = document.getElementById && !document.all;
- var ie4 = document.all;
-
- var toolTipSTYLE="";
- function initToolTips()
- {
- if(ns4||ns6||ie4)
- {
- if(ns4) toolTipSTYLE = document.toolTipLayer;
- else if(ns6) toolTipSTYLE = document.getElementById("toolTipLayer").style;
- else if(ie4) toolTipSTYLE = document.all.toolTipLayer.style;
- if(ns4) document.captureEvents(Event.MOUSEMOVE);
- else
- {
- toolTipSTYLE.visibility = "visible";
- toolTipSTYLE.display = "none";
- }
- }
- }
- function toolTip(name)
- {
- if(toolTip.arguments.length < 1)
- {
-
- if(ns4)
- {
- toolTipSTYLE.visibility = "hidden";
- document.form1.error.value="0";
- }
- else
- {
-
-
- if (!endaction) {toolTipSTYLE.display = "none";}
- if (rT) document.all("msg1").filters[1].Apply();
- if (bT) document.all("msg1").filters[2].Apply();
- document.all("msg1").filters[0].opacity=0;
- if (rT) document.all("msg1").filters[1].Play();
- if (bT) document.all("msg1").filters[2].Play();
- if (rT){
- if (document.all("msg1").filters[1].status==1 || document.all("msg1").filters[1].status==0){
- toolTipSTYLE.display = "none";}
- }
- if (bT){
- if (document.all("msg1").filters[2].status==1 || document.all("msg1").filters[2].status==0){
- toolTipSTYLE.display = "none";}
- }
- if (!rT && !bT) toolTipSTYLE.display = "none";
-
- }
- }
- else
- {
- var tw=120;
- var x=document.all[name].offsetLeft;
- var y=document.all[name].offsetTop;
-
- offsetX = 110;
- offsetY = 55;
-
- if(name=="tdname1"){
- offsetX=10;
- offsetY=-10;
- }
- if(name=="tdname2"){
- offsetX=10;
- offsetY=-10;
- }
- if(name=="tdname3"){
- offsetX=10;
- offsetY=-10;
- }
-
- var msg=getMessage(name);
- var fg = "#777777";
- var bg = "#eeeeee";
- var content =
- '<table id="msg1" name="msg1" border="0" cellspacing="0" cellpadding="1" bgcolor="' + fg + '" class="trans_msg"><td>' +
- '<table border="0" cellspacing="0" cellpadding="3" bgcolor="' + bg +
- '"><td width=' + tw + '><font face="Arial" color="' + fg +
- '" size="-2">' + msg +
- ' \;</font></td></table></td></table>';
-
- if(ns4)
- {
- toolTipSTYLE.document.write(content);
- toolTipSTYLE.document.close();
- toolTipSTYLE.visibility = "visible";
-
- toolTipSTYLE.left = x + offsetX;
- toolTipSTYLE.top = y + offsetY;
- }
- if(ns6)
- {
- document.getElementById("toolTipLayer").innerHTML = content;
- toolTipSTYLE.display='block'
-
- toolTipSTYLE.left = x + offsetX;
- toolTipSTYLE.top = y + offsetY;
- }
- if(ie4)
- {
- document.all("toolTipLayer").innerHTML=content;
- toolTipSTYLE.display='block';
-
- toolTipSTYLE.left = x + offsetX;
- toolTipSTYLE.top = y + offsetY;
-
- var cssopaction=document.all("msg1").filters[0].opacity;
- document.all("msg1").filters[0].opacity=0
- if (rT) document.all("msg1").filters[1].Apply();
- if (bT) document.all("msg1").filters[2].Apply();
- document.all("msg1").filters[0].opacity=cssopaction;
- if (rT) document.all("msg1").filters[1].Play();
- if (bT) document.all("msg1").filters[2].Play();
-
- }
- }
- }
- function getMessage(tdname){
- var msg="";
- if(tdname=="tdname1" || tdname=="tdname2" || tdname=="tdname3")
- msg="请填写用户名";
- return msg;
- }
-
- function sub(obj) {
- var my_tab = document.all("budgetTbl");
-
- if(my_tab.rows.length == 3) {
- alert("至少保留一行");
- } else {
- deleteRow(budgetTbl,obj.parentElement.parentElement.rowIndex);
- }
- }
- function checkrow() {
- insertRow(budgetTbl,budgetModel,-1);
- }
-
-
-
-
- function insertRow(opTbl,modelTbl,index)
- {
- var rowObj;
- var rowAlign;
- var cellHtml;
- var cellClass;
- var cellAlign;
- var cellNoWarp;
- var cellObj;
- var cellColspan;
- for(var i=0;modelTbl!=null && i<modelTbl.rows.length;i++)
- {
- if(index!=null && index>=0)
- {
- rowObj=opTbl.insertRow(index);
-
- }else
- {
- rowObj=opTbl.insertRow();
- }
- rowObj.className=modelTbl.rows[i].className;
- rowObj.align=modelTbl.rows[i].align;
- for(var j=0;modelTbl.rows[i].cells!=null && j<modelTbl.rows[i].cells.length;j++)
- {
- cellHtml=modelTbl.rows[i].cells[j].innerHTML;
- cellClass=modelTbl.rows[i].cells[j].className;
- cellAlign=modelTbl.rows[i].cells[j].align;
- cellNoWarp=modelTbl.rows[i].cells[j].noWarp;
-
- cellColspan=modelTbl.rows[i].cells[j].colSpan;
-
-
-
- cellObj=rowObj.insertCell();
- cellObj.align=cellAlign;
- cellObj.className=cellClass;
- cellObj.noWarp=cellNoWarp;
- cellObj.innerHTML=cellHtml;
- cellObj.colSpan = cellColspan;
- }
- }
- }
-
-
-
- function deleteRow(opTbl,index)
- {
- if(opTbl==null)return;
- if(index==-1)
- {
- if(opTbl.rows.length>1){opTbl.deleteRow(opTbl.rows.length-1);}
- }
- else
- {
- opTbl.deleteRow(index);
- }
- }
- </script>
- </head>
-
- <body>
- <!-- 初始化步骤 -->
- <div id="toolTipLayer" style="position:absolute; visibility: hidden"></div>
- <p>
- <script>initToolTips()</script>
- </p>
- <form action="" method="post" name="form1">
- <table id="budgetTbl" border="1">
- <tr>
- <td><input type="button" name="btn" value="插入一行" onclick="checkrow()"></td>
- </tr>
- <tr align="center">
- <td>操作</td>
- <td id="tdname1" colspan="2">名字1</td>
- <td id="tdname2">名字2</td>
- <td id="tdname3">名字3</td>
- </tr>
- <tr align="center">
- <td><input type="button" name="btn" value="删除" onclick="sub(this)"></td>
- <td colspan="2"><input type="text" name="name1" onfocus="toolTip('tdname1')" onblur="toolTip()"></td>
- <td><input type="text" name="name2" onfocus="toolTip('tdname2')" onblur="toolTip()"></td>
- <td><input type="text" name="name3" onfocus="toolTip('tdname3')" onblur="toolTip()"></td>
- </tr>
- </table>
- </form>
- <!-- 模板表格 -->
- <table style="position:absolute; display: none" id="budgetModel">
- <tr align="center">
- <td><input type="button" name="btn" value="删除" onclick="sub(this)"></td>
- <td colspan="2"><input type="text" name="name1" onfocus="toolTip('tdname1')" onblur="toolTip()"></td>
- <td><input type="text" name="name2" onfocus="toolTip('tdname2')" onblur="toolTip()"></td>
- <td><input type="text" name="name3" onfocus="toolTip('tdname3')" onblur="toolTip()"></td>
- </tr>
- </table>
- </body>
- </html>
分享到:
Global site tag (gtag.js) - Google Analytics
相关推荐
JavaScript动态表单是一种在网页上创建、修改或交互操作表单元素的技术,它极大地提升了用户界面的灵活性和用户体验。在Web开发中,JavaScript扮演着关键角色,为表单提供了丰富的功能,如验证输入、动态添加删除...
在JavaScript编程中,动态添加表单是一项常见的需求,特别是在构建具有高度交互性和可扩展性的Web应用时。通过动态创建和管理表单元素,开发者可以轻松应对用户可能的需求变化,实现XML数据的加载和显示,从而增强...
在表单验证中,JavaScript可以通过监听表单的`submit`事件来阻止默认提交行为,然后逐个检查输入字段的值。可以使用`document.getElementById`或`document.querySelector`等方法获取表单元素,再利用`value`属性获取...
在Java开发领域,动态表单设计是一项重要的技术,它允许开发者根据业务需求创建和修改表单,无需编写大量的HTML和JavaScript代码。这种技术的核心在于提供一个灵活的、可配置的平台,用户或开发者可以通过界面来定义...
1. **表单元素创建**:通过JavaScript,开发者可以动态创建和操纵HTML表单元素,如输入框(input)、选择框(select)、复选框(checkbox)和按钮(button)等。 2. **数据验证**:JavaScript提供了实时验证用户输入的能力...
- **jquery.idealforms.min.js**:JavaScript文件,实现了表单的动态行为、键盘操作、验证等功能。需要与CSS文件一起引入到项目中,以实现插件的全部功能。 - **readme.txt**:通常包含插件的安装指南、使用方法和...
JavaScript弹出层表单提交是一种常见的用户交互设计,它允许用户在不离开当前页面的情况下填写并提交表单数据。这种技术常用于网站的登录、注册、评论或编辑功能,提供了良好的用户体验,因为用户无需跳转到新页面...
在网页设计中,JavaScript是一种非常重要的脚本语言,它能够为用户提供动态交互体验。当我们需要在表单中实现数据的实时计算时,JavaScript就显得尤为关键。本篇将深入探讨如何利用JavaScript完成表单的自动计算,以...
需要注意的是,表单的action属性是可以动态改变的,开发者可以通过JavaScript动态地修改表单的action属性,以改变数据提交的目标地址。 例如,如果我们想根据用户的某些操作更改表单提交的目标地址,可以编写如下...
"javascript表单正则验证自定义提示"这一主题聚焦于利用正则表达式(Regular Expressions)进行表单验证,并通过自定义提示来优化用户交互。 正则表达式是一种强大的文本处理工具,它可以用来匹配、查找、替换和...
这些变化可以通过JavaScript来实现,例如响应用户的点击、表单提交等事件,或者根据用户的位置、时间等信息动态展示不同的内容。 ### JavaScript在动态网页开发中的应用 1. **页面元素的动态更新**:利用DOM...
比较实用的javascript做的表单验证,验证的表单域包括用户名、密码、密码确认、密码提示问题、邮箱、手机号码、身份证。表单域基本通过获得焦点显示提示信息,失去焦点进行验证,还有提交表单验证。提交表单先进行...
本文将深入探讨"javascript表单验证方式一",介绍如何利用JavaScript进行表单验证,确保用户输入的数据符合预设规则,提高用户体验,同时也减轻了服务器端的压力。 首先,表单验证的基本目标是检查用户在HTML表单中...
JavaScript是一种广泛应用于网页和网络应用开发的脚本语言,它在客户端运行,为用户提供动态、交互式的用户体验。在这个“javascript实现注册表单”的项目中,我们将会探讨如何使用JavaScript来创建一个功能丰富的...
JavaScript作为客户端脚本语言,可以通过多种策略来防止用户意外或恶意地多次提交表单。以下是一些关键的知识点: 1. **禁用提交按钮**:最简单的预防方法是在用户点击提交按钮后立即将其禁用。这可以通过监听`...
3. JavaScript文件:处理表单的动态生成、数据验证、提交逻辑等。 4. 后端服务:提供API接口,接收表单数据并存储。 5. 数据库脚本:用于创建和操作表单数据的数据库结构。 在实际项目中,动态表单可能还需要考虑更...
javascript二级联动表单javascript二级联动表单javascript二级联动表单javascript二级联动表单javascript二级联动表单javascript二级联动表单javascript二级联动表单javascript二级联动表单
8. **表单处理**:JavaScript可以验证用户输入,控制表单提交,甚至实现动态表单生成。 9. **动画与定时器**:`setTimeout()`和`setInterval()`可用来执行延时或周期性任务,创建平滑的动画效果。 10. **面向对象...
本文实例讲述了JavaScript获取表单内所有元素值的方法。分享给大家供大家参考。具体如下: 下面的JS代码可以遍历指定表单中的所有元素,并输出元素的值 <!DOCTYPE html> <html> <body> <form id=...
"javascript验证表单大全"这个主题涵盖了使用JavaScript进行表单验证的各种方法和技术,旨在为开发者提供全面的参考。以下是对这个主题的详细阐述: 一、表单验证的重要性 表单验证是确保用户输入数据有效性和安全...