`
jeasony
  • 浏览: 199477 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

JavaScript的动态表单

    博客分类:
  • js
阅读更多

事先声明引用了别人的代码,做了一些细节上的改动。
使用模板,动态插入行
modelInsertRow.jsp

<%@ 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) // hide
		  {
		  	
		    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 // show
		  {
			var tw=120;//提示框宽度
			var x=document.all[name].offsetLeft;
		    var y=document.all[name].offsetTop;
		    //alert(x + "    " + y);
			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";//getFontColor();
		    var bg = "#eeeeee";//getBgColor();
		    var content =
		    '<table id="msg1" name="msg1" border="0" cellspacing="0" cellpadding="1" bgcolor="' + fg + '" class="trans_msg"><<B style="COLOR: black; BACKGROUND-COLOR: #99ff99">td</B>>' +
		    '<table border="0" cellspacing="0" cellpadding="3" bgcolor="' + bg + 
		    '"><<B style="COLOR: black; BACKGROUND-COLOR: #99ff99">td</B> width=' + tw + '><font face="Arial" color="' + fg +
		    '" size="-2">' + msg +
		    '&nbsp;\;</font></<B style="COLOR: black; BACKGROUND-COLOR: #99ff99">td</B>></table></<B style="COLOR: black; BACKGROUND-COLOR: #99ff99">td</B>></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");
			//alert(my_tab.rows.length);
			if(my_tab.rows.length == 3) {
				alert("至少保留一行");
			} else {
				deleteRow(budgetTbl,obj.parentElement.parentElement.rowIndex);
			}
		}
		function checkrow() {
		 	insertRow(budgetTbl,budgetModel,-1);
		}
		//对指定表格按模板表格的内容插入一行
		//opTbl:要增加行的表格对象
		//modelTbl:模板表格
		//index:要插入的位置,-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;
					//加一个colspan,跨几列
					cellColspan=modelTbl.rows[i].cells[j].colSpan;
					//alert(cellAlign);
					//alert(cellColspan);
					
					cellObj=rowObj.insertCell();
					cellObj.align=cellAlign;
					cellObj.className=cellClass;
					cellObj.noWarp=cellNoWarp;
					cellObj.innerHTML=cellHtml;
					cellObj.colSpan = cellColspan;
				}		
			}
		}
		//删除指定表格的一行
		//opTbl:要操作的表格对象
		//index:要删除的行位置,-1表示删最后一行
		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>
    			<<B style="COLOR: black; BACKGROUND-COLOR: #99ff99">td</B>><input type="button" name="btn" value="插入一行" onclick="checkrow()"></<B style="COLOR: black; BACKGROUND-COLOR: #99ff99">td</B>>
    		</tr>
    		<tr align="center">
    			<<B style="COLOR: black; BACKGROUND-COLOR: #99ff99">td</B>>操作</<B style="COLOR: black; BACKGROUND-COLOR: #99ff99">td</B>>
    			<<B style="COLOR: black; BACKGROUND-COLOR: #99ff99">td</B> id="tdname1" colspan="2">名字1</<B style="COLOR: black; BACKGROUND-COLOR: #99ff99">td</B>>
    			<<B style="COLOR: black; BACKGROUND-COLOR: #99ff99">td</B> id="tdname2">名字2</<B style="COLOR: black; BACKGROUND-COLOR: #99ff99">td</B>>
    			<<B style="COLOR: black; BACKGROUND-COLOR: #99ff99">td</B> id="tdname3">名字3</<B style="COLOR: black; BACKGROUND-COLOR: #99ff99">td</B>>
    		</tr>
    		<tr align="center">
    			<<B style="COLOR: black; BACKGROUND-COLOR: #99ff99">td</B>><input type="button" name="btn" value="删除" onclick="sub(this)"></<B style="COLOR: black; BACKGROUND-COLOR: #99ff99">td</B>>
    			<<B style="COLOR: black; BACKGROUND-COLOR: #99ff99">td</B> colspan="2"><input type="text" name="name1" <B style="COLOR: black; BACKGROUND-COLOR: #ff9999">onfocus</B>="toolTip('tdname1')" onblur="toolTip()"></<B style="COLOR: black; BACKGROUND-COLOR: #99ff99">td</B>>
    			<<B style="COLOR: black; BACKGROUND-COLOR: #99ff99">td</B>><input type="text" name="name2" <B style="COLOR: black; BACKGROUND-COLOR: #ff9999">onfocus</B>="toolTip('tdname2')" onblur="toolTip()"></<B style="COLOR: black; BACKGROUND-COLOR: #99ff99">td</B>>
    			<<B style="COLOR: black; BACKGROUND-COLOR: #99ff99">td</B>><input type="text" name="name3" <B style="COLOR: black; BACKGROUND-COLOR: #ff9999">onfocus</B>="toolTip('tdname3')" onblur="toolTip()"></<B style="COLOR: black; BACKGROUND-COLOR: #99ff99">td</B>>
    		</tr>
    	</table>
    </form>
    <!-- 模板表格 -->
    <table style="position:absolute; display: none" id="budgetModel">
    	<tr align="center">
    		<<B style="COLOR: black; BACKGROUND-COLOR: #99ff99">td</B>><input type="button" name="btn" value="删除" onclick="sub(this)"></<B style="COLOR: black; BACKGROUND-COLOR: #99ff99">td</B>>
    		<<B style="COLOR: black; BACKGROUND-COLOR: #99ff99">td</B> colspan="2"><input type="text" name="name1" <B style="COLOR: black; BACKGROUND-COLOR: #ff9999">onfocus</B>="toolTip('tdname1')" onblur="toolTip()"></<B style="COLOR: black; BACKGROUND-COLOR: #99ff99">td</B>>
   			<<B style="COLOR: black; BACKGROUND-COLOR: #99ff99">td</B>><input type="text" name="name2" <B style="COLOR: black; BACKGROUND-COLOR: #ff9999">onfocus</B>="toolTip('tdname2')" onblur="toolTip()"></<B style="COLOR: black; BACKGROUND-COLOR: #99ff99">td</B>>
   			<<B style="COLOR: black; BACKGROUND-COLOR: #99ff99">td</B>><input type="text" name="name3" <B style="COLOR: black; BACKGROUND-COLOR: #ff9999">onfocus</B>="toolTip('tdname3')" onblur="toolTip()"></<B style="COLOR: black; BACKGROUND-COLOR: #99ff99">td</B>>
    	</tr>
    </table>
  </body>
</html>

  

分享到:
评论

相关推荐

    JS动态表单

    JavaScript动态表单是一种在网页上创建、修改或交互操作表单元素的技术,它极大地提升了用户界面的灵活性和用户体验。在Web开发中,JavaScript扮演着关键角色,为表单提供了丰富的功能,如验证输入、动态添加删除...

    Javascript 动态添加表单实例

    在JavaScript编程中,动态添加表单是一项常见的需求,特别是在构建具有高度交互性和可扩展性的Web应用时。通过动态创建和管理表单元素,开发者可以轻松应对用户可能的需求变化,实现XML数据的加载和显示,从而增强...

    基于JavaScript的表单验证.zip

    在表单验证中,JavaScript可以通过监听表单的`submit`事件来阻止默认提交行为,然后逐个检查输入字段的值。可以使用`document.getElementById`或`document.querySelector`等方法获取表单元素,再利用`value`属性获取...

    表单设计Javascript工具

    1. **表单元素创建**:通过JavaScript,开发者可以动态创建和操纵HTML表单元素,如输入框(input)、选择框(select)、复选框(checkbox)和按钮(button)等。 2. **数据验证**:JavaScript提供了实时验证用户输入的能力...

    JAVA动态表单设计,自定义表单,自定义数据

    在Java开发领域,动态表单设计是一项重要的技术,它允许开发者根据业务需求创建和修改表单,无需编写大量的HTML和JavaScript代码。这种技术的核心在于提供一个灵活的、可配置的平台,用户或开发者可以通过界面来定义...

    javascript表单美化和验证插件

    - **jquery.idealforms.min.js**:JavaScript文件,实现了表单的动态行为、键盘操作、验证等功能。需要与CSS文件一起引入到项目中,以实现插件的全部功能。 - **readme.txt**:通常包含插件的安装指南、使用方法和...

    javascript弹出层表单提交代码

    JavaScript弹出层表单提交是一种常见的用户交互设计,它允许用户在不离开当前页面的情况下填写并提交表单数据。这种技术常用于网站的登录、注册、评论或编辑功能,提供了良好的用户体验,因为用户无需跳转到新页面...

    使用JavaScript 完成表单的自动计算

    在网页设计中,JavaScript是一种非常重要的脚本语言,它能够为用户提供动态交互体验。当我们需要在表单中实现数据的实时计算时,JavaScript就显得尤为关键。本篇将深入探讨如何利用JavaScript完成表单的自动计算,以...

    JavaScript获取网页表单action属性的方法

    需要注意的是,表单的action属性是可以动态改变的,开发者可以通过JavaScript动态地修改表单的action属性,以改变数据提交的目标地址。 例如,如果我们想根据用户的某些操作更改表单提交的目标地址,可以编写如下...

    javascript表单正则验证自定义提示

    "javascript表单正则验证自定义提示"这一主题聚焦于利用正则表达式(Regular Expressions)进行表单验证,并通过自定义提示来优化用户交互。 正则表达式是一种强大的文本处理工具,它可以用来匹配、查找、替换和...

    Javascript动态网页教程

    这些变化可以通过JavaScript来实现,例如响应用户的点击、表单提交等事件,或者根据用户的位置、时间等信息动态展示不同的内容。 ### JavaScript在动态网页开发中的应用 1. **页面元素的动态更新**:利用DOM...

    javascript表单验证 正则表达式验证表单

    比较实用的javascript做的表单验证,验证的表单域包括用户名、密码、密码确认、密码提示问题、邮箱、手机号码、身份证。表单域基本通过获得焦点显示提示信息,失去焦点进行验证,还有提交表单验证。提交表单先进行...

    javascript表单验证方式一

    本文将深入探讨"javascript表单验证方式一",介绍如何利用JavaScript进行表单验证,确保用户输入的数据符合预设规则,提高用户体验,同时也减轻了服务器端的压力。 首先,表单验证的基本目标是检查用户在HTML表单中...

    javascript实现注册表单

    JavaScript是一种广泛应用于网页和网络应用开发的脚本语言,它在客户端运行,为用户提供动态、交互式的用户体验。在这个“javascript实现注册表单”的项目中,我们将会探讨如何使用JavaScript来创建一个功能丰富的...

    javascript方式防止表单重复提交

    JavaScript作为客户端脚本语言,可以通过多种策略来防止用户意外或恶意地多次提交表单。以下是一些关键的知识点: 1. **禁用提交按钮**:最简单的预防方法是在用户点击提交按钮后立即将其禁用。这可以通过监听`...

    动态表单的简单实现

    3. JavaScript文件:处理表单的动态生成、数据验证、提交逻辑等。 4. 后端服务:提供API接口,接收表单数据并存储。 5. 数据库脚本:用于创建和操作表单数据的数据库结构。 在实际项目中,动态表单可能还需要考虑更...

    javascript二级联动表单

    javascript二级联动表单javascript二级联动表单javascript二级联动表单javascript二级联动表单javascript二级联动表单javascript二级联动表单javascript二级联动表单javascript二级联动表单

    JavaScript动态网页设计经典实例

    8. **表单处理**:JavaScript可以验证用户输入,控制表单提交,甚至实现动态表单生成。 9. **动画与定时器**:`setTimeout()`和`setInterval()`可用来执行延时或周期性任务,创建平滑的动画效果。 10. **面向对象...

    JavaScript获取表单内所有元素值的方法

    本文实例讲述了JavaScript获取表单内所有元素值的方法。分享给大家供大家参考。具体如下: 下面的JS代码可以遍历指定表单中的所有元素,并输出元素的值 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;body&gt; &lt;form id=...

    JAVASCRIPT 动态网页编程实例手册

    JavaScript,作为全球最广泛使用的脚本语言之一,是构建动态网页的关键技术。它允许开发者创建交互性强、用户体验优良的Web应用程序。《JAVASCRIPT 动态网页编程实例手册》显然是为了帮助读者深入理解和掌握...

Global site tag (gtag.js) - Google Analytics