JavaScript的动态表单

最新推荐文章于 2022-11-24 22:05:01 发布
最新推荐文章于 2022-11-24 22:05:01 发布
阅读量125 收藏
点赞数
分类专栏： js 文章标签： JavaScript J# Cache CSS JSP ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wsrjzhsy0493/article/details/83365649
版权

事先声明引用了别人的代码，做了一些细节上的改动。
使用模板，动态插入行
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="插入一行" οnclick="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="删除" οnclick="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')" οnblur="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')" οnblur="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')" οnblur="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="删除" οnclick="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')" οnblur="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')" οnblur="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')" οnblur="toolTip()"></<B style="COLOR: black; BACKGROUND-COLOR: #99ff99">td</B>>
    	</tr>
    </table>
  </body>
</html>

  

wsrjzhsy0493
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript动态生成表格
qq_74315744的博客
10-26 790
【代码】JavaScript动态生成表格。
JavaScript 设置动态表格
O_osange的博客
01-11 1030
JavaScript 设置动态表格
JS表单验证
qq_53876295的博客
11-24 742
JS表单验证
JS动态操作表单
footprint01的博客
09-21 714
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;style type="text/css"&gt; #main { border-collapse: collapse;
JS动态表格
qq_45387575的博客
02-25 2031
1、因为里面的数据都是动态的，需要JS来动态生成 ，数据采取对象形式存储 2、所有的数据都是放在tbody行里面 3、创建的行数对应多少人，用数组的长度来获取 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <m...
javascript创建动态表单的方法
10-23
主要介绍了javascript创建动态表单的方法,实例分析了javascript动态操作页面表单元素的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
JavaScript动态创建form表单并提交的实现方法
10-23
主要介绍了JavaScript动态创建form表单并提交的实现方法,涉及JavaScript动态创建页面元素及模拟表单提交的技巧,需要的朋友可以参考下
JavaScript实现动态增加文件域表单
10-30
对于上传多个文件，可以通过js来动态生成文件域，下面是源代码，收藏在这里，供以后直接使用，hoho！
JavaScript表单练习.zip
12-23
1． 掌握JavaScript脚本的调用和基本语法； 2． 掌握JavaScript常用内置对象的基本应用； 3． 掌握BOM和window消息对话框的使用； 4． 掌握HTML DOM动态网页设计技术。
javascript实现表单验证
10-22
主要介绍了javascript实现表单验证的相关资料，以一个完整的实例对javascript实现表单验证的方法进行分析，感兴趣的小伙伴们可以参考一下
js动态创建表格
11-22
js动态创建表格，利用dom技术动态输入行列来创建表格
JS动态表单
04-22
这是一个JavaScript简单的动态效果
js动态生成表单
weixin_42546729的博客
03-13 2522
changeItemParam : function(node,formId){ $.ajax({ type: "GET", url: "/rest/item/param/" + node.id, statusCode:{ 200 : functio...
js实现动态表单输入
Fmwrong的博客
11-13 760
1.js实现动态表单输入 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="checkDemo.css"/> <script src="global.js"></script> </head&g
js实现动态表格
weixin_45732235的博客
03-14 212
看了热榜的文章，想跟着练习一下。馆主阿牛 🌱实现效果：✨html代码如下： <table> <thead> <tr> <th>书籍</th> <th>作者</th> <th>类别</th> <th>操作</th> </tr> </thead>
js动态创建form以post方式提交
iteye_6607的博客
01-31 1139
&lt;script &gt;//js动态创建form 提交表单function formSubmit(elementValue) {     var turnForm = document.createElement("form");       //一定要加入到body中！！       document.body.appendChild(turnForm);    turnForm.met...
js动态创建Form表单并提交
SomeDay的专栏
01-25 3229
javascript动态创建Form表单和表单项，然后提交表单请求，最后删除表单，代码片段如下（Firefox测试通过）： var dlform = document.createElement('form'); dlform.style="display:none;"; dlform.method='post';
一个动态的表单页面（JS+CSS）
weixin_40329367的博客
07-03 1519
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style type="text/css"&gt;
javascript动态创建form表单
TO
03-13 294
//helper function to create the form function getNewSubmitForm(){var submitForm = document.createElement("FORM");document.body.appendChild(submitForm);submitForm.method = "POST";return submitForm;}//h...
javascript实现表单提交
最新发布
05-04
然后使用 JavaScript 代码来拦截表单提交事件，并通过 AJAX 发送表单数据到服务器端： ```javascript document.getElementById("my-form").addEventListener("submit", function(event) { event.preventDefault();...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值