`
yxgyh
  • 浏览: 275648 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

JavaScript的动态表单

阅读更多
  1. <%@ page language="java" import="java.util.*" pageEncoding="GB2312"%>   
  2. <%   
  3. String path = request.getContextPath();   
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";   
  5. %>   
  6.   
  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">   
  8. <html>      
  9.     <meta http-equiv="pragma" content="no-cache">   
  10.     <meta http-equiv="cache-control" content="no-cache">   
  11.     <meta http-equiv="expires" content="0">       
  12.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">   
  13.     <meta http-equiv="description" content="This is my page">   
  14.         <!-- 淡入淡出的样式 -->   
  15.         <style  type="text/css">   
  16.             <!--    
  17.             .trans_msg   
  18.                 {   
  19.                 filter:alpha(opacity=100,enabled=1) revealTrans(duration=.2,transition=1) blendtrans(duration=.2);   
  20.                 }   
  21.             -->   
  22.         </style>   
  23.     <script type="text/javascript">   
  24.         //--初始化变量--   
  25.         var rT=true;//允许图像过渡   
  26.         var bT=true;//允许图像淡入淡出   
  27.            
  28.         var endaction=false;//结束动画   
  29.            
  30.         var ns4 = document.layers;   
  31.         var ns6 = document.getElementById && !document.all;   
  32.         var ie4 = document.all;   
  33.            
  34.         var toolTipSTYLE="";   
  35.         function initToolTips()   
  36.         {   
  37.           if(ns4||ns6||ie4)   
  38.           {   
  39.             if(ns4) toolTipSTYLE = document.toolTipLayer;   
  40.             else if(ns6) toolTipSTYLE = document.getElementById("toolTipLayer").style;   
  41.             else if(ie4) toolTipSTYLE = document.all.toolTipLayer.style;   
  42.             if(ns4) document.captureEvents(Event.MOUSEMOVE);   
  43.             else  
  44.             {   
  45.               toolTipSTYLE.visibility = "visible";   
  46.               toolTipSTYLE.display = "none";   
  47.             }   
  48.           }   
  49.         }   
  50.         function toolTip(name)   
  51.         {   
  52.           if(toolTip.arguments.length < 1// hide   
  53.           {   
  54.                
  55.             if(ns4)    
  56.             {   
  57.             toolTipSTYLE.visibility = "hidden";   
  58.             document.form1.error.value="0";   
  59.             }   
  60.             else    
  61.             {   
  62.                  
  63.               //--图象过渡,淡出处理--   
  64.               if (!endaction) {toolTipSTYLE.display = "none";}   
  65.               if (rT) document.all("msg1").filters[1].Apply();   
  66.               if (bT) document.all("msg1").filters[2].Apply();   
  67.               document.all("msg1").filters[0].opacity=0;   
  68.               if (rT) document.all("msg1").filters[1].Play();   
  69.               if (bT) document.all("msg1").filters[2].Play();   
  70.               if (rT){    
  71.               if (document.all("msg1").filters[1].status==1 || document.all("msg1").filters[1].status==0){     
  72.               toolTipSTYLE.display = "none";}   
  73.               }   
  74.               if (bT){   
  75.               if (document.all("msg1").filters[2].status==1 || document.all("msg1").filters[2].status==0){     
  76.               toolTipSTYLE.display = "none";}   
  77.               }   
  78.               if (!rT && !bT) toolTipSTYLE.display = "none";   
  79.               //----------------------   
  80.             }   
  81.           }   
  82.           else // show   
  83.           {   
  84.             var tw=120;//提示框宽度   
  85.             var x=document.all[name].offsetLeft;   
  86.             var y=document.all[name].offsetTop;   
  87.             //alert(x + "    " + y);   
  88.             offsetX = 110;   
  89.             offsetY = 55;   
  90.                
  91.             if(name=="tdname1"){   
  92.               offsetX=10;   
  93.               offsetY=-10;   
  94.             }   
  95.             if(name=="tdname2"){   
  96.               offsetX=10;   
  97.               offsetY=-10;   
  98.             }   
  99.             if(name=="tdname3"){   
  100.               offsetX=10;   
  101.               offsetY=-10;   
  102.             }   
  103.            
  104.             var msg=getMessage(name);   
  105.             var fg = "#777777";//getFontColor();   
  106.             var bg = "#eeeeee";//getBgColor();   
  107.             var content =   
  108.             '<table id="msg1" name="msg1" border="0" cellspacing="0" cellpadding="1" bgcolor="' + fg + '" class="trans_msg"><td>' +   
  109.             '<table border="0" cellspacing="0" cellpadding="3" bgcolor="' + bg +    
  110.             '"><td width=' + tw + '><font face="Arial" color="' + fg +   
  111.             '" size="-2">' + msg +   
  112.             ' \;</font></td></table></td></table>';   
  113.                
  114.             if(ns4)   
  115.             {   
  116.               toolTipSTYLE.document.write(content);   
  117.               toolTipSTYLE.document.close();   
  118.               toolTipSTYLE.visibility = "visible";   
  119.                
  120.               toolTipSTYLE.left = x + offsetX;   
  121.               toolTipSTYLE.top = y + offsetY;   
  122.             }   
  123.             if(ns6)   
  124.             {   
  125.               document.getElementById("toolTipLayer").innerHTML = content;   
  126.               toolTipSTYLE.display='block'  
  127.                 
  128.               toolTipSTYLE.left = x + offsetX;   
  129.               toolTipSTYLE.top = y + offsetY;   
  130.             }   
  131.             if(ie4)   
  132.             {   
  133.               document.all("toolTipLayer").innerHTML=content;   
  134.               toolTipSTYLE.display='block';   
  135.                 
  136.               toolTipSTYLE.left = x + offsetX;   
  137.               toolTipSTYLE.top = y + offsetY;   
  138.               //--图象过渡,淡入处理--   
  139.               var cssopaction=document.all("msg1").filters[0].opacity;   
  140.               document.all("msg1").filters[0].opacity=0  
  141.               if (rT) document.all("msg1").filters[1].Apply();   
  142.               if (bT) document.all("msg1").filters[2].Apply();   
  143.               document.all("msg1").filters[0].opacity=cssopaction;   
  144.               if (rT) document.all("msg1").filters[1].Play();   
  145.               if (bT) document.all("msg1").filters[2].Play();   
  146.               //----------------------   
  147.             }   
  148.           }   
  149.         }   
  150.         function getMessage(tdname){   
  151.             var msg="";   
  152.             if(tdname=="tdname1" || tdname=="tdname2" || tdname=="tdname3")   
  153.                 msg="请填写用户名";   
  154.             return msg;   
  155.         }   
  156.        
  157.         function sub(obj) {   
  158.             var my_tab = document.all("budgetTbl");   
  159.             //alert(my_tab.rows.length);   
  160.             if(my_tab.rows.length == 3) {   
  161.                 alert("至少保留一行");   
  162.             } else {   
  163.                 deleteRow(budgetTbl,obj.parentElement.parentElement.rowIndex);   
  164.             }   
  165.         }   
  166.         function checkrow() {   
  167.             insertRow(budgetTbl,budgetModel,-1);   
  168.         }   
  169.         //对指定表格按模板表格的内容插入一行   
  170.         //opTbl:要增加行的表格对象   
  171.         //modelTbl:模板表格   
  172.         //index:要插入的位置,-1表示添加到最后位置   
  173.         function insertRow(opTbl,modelTbl,index)   
  174.         {   
  175.             var rowObj;   
  176.             var rowAlign;   
  177.             var cellHtml;   
  178.             var cellClass;   
  179.             var cellAlign;   
  180.             var cellNoWarp;   
  181.             var cellObj;   
  182.             var cellColspan;   
  183.             for(var i=0;modelTbl!=null && i<modelTbl.rows.length;i++)   
  184.             {   
  185.                 if(index!=null && index>=0)   
  186.                 {   
  187.                     rowObj=opTbl.insertRow(index);   
  188.                        
  189.                 }else  
  190.                 {   
  191.                     rowObj=opTbl.insertRow();   
  192.                 }   
  193.                 rowObj.className=modelTbl.rows[i].className;   
  194.                 rowObj.align=modelTbl.rows[i].align;   
  195.                 for(var j=0;modelTbl.rows[i].cells!=null && j<modelTbl.rows[i].cells.length;j++)   
  196.                 {              
  197.                     cellHtml=modelTbl.rows[i].cells[j].innerHTML;   
  198.                     cellClass=modelTbl.rows[i].cells[j].className;   
  199.                     cellAlign=modelTbl.rows[i].cells[j].align;   
  200.                     cellNoWarp=modelTbl.rows[i].cells[j].noWarp;   
  201.                     //加一个colspan,跨几列   
  202.                     cellColspan=modelTbl.rows[i].cells[j].colSpan;   
  203.                     //alert(cellAlign);   
  204.                     //alert(cellColspan);   
  205.                        
  206.                     cellObj=rowObj.insertCell();   
  207.                     cellObj.align=cellAlign;   
  208.                     cellObj.className=cellClass;   
  209.                     cellObj.noWarp=cellNoWarp;   
  210.                     cellObj.innerHTML=cellHtml;   
  211.                     cellObj.colSpan = cellColspan;   
  212.                 }          
  213.             }   
  214.         }   
  215.         //删除指定表格的一行   
  216.         //opTbl:要操作的表格对象   
  217.         //index:要删除的行位置,-1表示删最后一行   
  218.         function deleteRow(opTbl,index)   
  219.         {   
  220.             if(opTbl==null)return;   
  221.             if(index==-1)   
  222.             {   
  223.                 if(opTbl.rows.length>1){opTbl.deleteRow(opTbl.rows.length-1);}   
  224.             }   
  225.             else  
  226.             {   
  227.                 opTbl.deleteRow(index);   
  228.             }   
  229.         }   
  230.     </script>   
  231.   </head>   
  232.      
  233.   <body>   
  234.     <!-- 初始化步骤 -->   
  235.     <div id="toolTipLayer" style="position:absolute; visibility: hidden"></div>   
  236.     <p>   
  237.       <script>initToolTips()</script>   
  238.     </p>   
  239.     <form action="" method="post" name="form1">   
  240.         <table id="budgetTbl" border="1">   
  241.             <tr>   
  242.                 <td><input type="button" name="btn" value="插入一行" onclick="checkrow()"></td>   
  243.             </tr>   
  244.             <tr align="center">   
  245.                 <td>操作</td>   
  246.                 <td id="tdname1" colspan="2">名字1</td>   
  247.                 <td id="tdname2">名字2</td>   
  248.                 <td id="tdname3">名字3</td>   
  249.             </tr>   
  250.             <tr align="center">   
  251.                 <td><input type="button" name="btn" value="删除" onclick="sub(this)"></td>   
  252.                 <td colspan="2"><input type="text" name="name1" onfocus="toolTip('tdname1')" onblur="toolTip()"></td>   
  253.                 <td><input type="text" name="name2" onfocus="toolTip('tdname2')" onblur="toolTip()"></td>   
  254.                 <td><input type="text" name="name3" onfocus="toolTip('tdname3')" onblur="toolTip()"></td>   
  255.             </tr>   
  256.         </table>   
  257.     </form>   
  258.     <!-- 模板表格 -->   
  259.     <table style="position:absolute; display: none" id="budgetModel">   
  260.         <tr align="center">   
  261.             <td><input type="button" name="btn" value="删除" onclick="sub(this)"></td>   
  262.             <td colspan="2"><input type="text" name="name1" onfocus="toolTip('tdname1')" onblur="toolTip()"></td>   
  263.             <td><input type="text" name="name2" onfocus="toolTip('tdname2')" onblur="toolTip()"></td>   
  264.             <td><input type="text" name="name3" onfocus="toolTip('tdname3')" onblur="toolTip()"></td>   
  265.         </tr>   
  266.     </table>   
  267.   </body>   
  268. </html>  
分享到:
评论

相关推荐

    JS动态表单

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

    Javascript 动态添加表单实例

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

    基于JavaScript的表单验证.zip

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

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

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

    表单设计Javascript工具

    1. **表单元素创建**:通过JavaScript,开发者可以动态创建和操纵HTML表单元素,如输入框(input)、选择框(select)、复选框(checkbox)和按钮(button)等。 2. **数据验证**: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验证表单大全"这个主题涵盖了使用JavaScript进行表单验证的各种方法和技术,旨在为开发者提供全面的参考。以下是对这个主题的详细阐述: 一、表单验证的重要性 表单验证是确保用户输入数据有效性和安全...

Global site tag (gtag.js) - Google Analytics