JavaScript的动态表单

最新推荐文章于 2023-10-26 17:49:54 发布
最新推荐文章于 2023-10-26 17:49:54 发布
阅读量131 收藏
点赞数
分类专栏： Ajax 文章标签： JavaScript JSP J# ViewUI
事先声明引用了别人的代码，做了一些细节上的改动。
使用模板，动态插入行
modelInsertRow.jsp
[code]
<%@ 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"><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");
//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>
<td><input type="button" name="btn" value="插入一行" οnclick="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="删除" οnclick="sub(this)"></td>
<td colspan="2"><input type="text" name="name1" οnfοcus="toolTip('tdname1')" οnblur="toolTip()"></td>
<td><input type="text" name="name2" οnfοcus="toolTip('tdname2')" οnblur="toolTip()"></td>
<td><input type="text" name="name3" οnfοcus="toolTip('tdname3')" οnblur="toolTip()"></td>
</tr>
</table>
</form>
<!-- 模板表格 -->
<table style="position:absolute; display: none" id="budgetModel">
<tr align="center">
<td><input type="button" name="btn" value="删除" οnclick="sub(this)"></td>
<td colspan="2"><input type="text" name="name1" οnfοcus="toolTip('tdname1')" οnblur="toolTip()"></td>
<td><input type="text" name="name2" οnfοcus="toolTip('tdname2')" οnblur="toolTip()"></td>
<td><input type="text" name="name3" οnfοcus="toolTip('tdname3')" οnblur="toolTip()"></td>
</tr>
</table>
</body>
</html>

[/code]
还是那句老话，自己动手做做看，就知道什么意思了，其乐无穷哦！
tap2008
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript动态创建form表单并提交的实现方法
11-22
本文实例讲述了JavaScript动态创建form表单并提交的实现方法。分享给大家供大家参考，具体如下： 页面布局有些复杂的情况下，可能需要在页面中动态创建一个 form，JavaScript 创建 form 演示如下： // JavaScript 构建一个 form function MakeForm() { // 创建一个 form var form1 = document.createElement("form"); form1.id = "form1"; form1.name = "form1"; // 添加到 body 中 document.body.app
js 动态表单
yjnlovepy的博客
01-17 539
js动态表单
js动态表单
luoshuangcan的专栏
09-23 952
    添加附件  function addFj()  {      var oTb = document.getElementById("tb1");      var oTr = oTb.insertRow(0);      var name = "thefilename"+document.form1.fjCnt.value;      document.form1.fjCnt.value=
javascript创建动态表单的方法
10-23
主要介绍了javascript创建动态表单的方法,实例分析了javascript动态操作页面表单元素的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
BootStrap 动态表单效果
10-19
总的来说，Bootstrap动态表单效果的实现结合了HTML模板、CSS样式和JavaScript/jQuery事件处理，通过动态创建和销毁DOM元素，实现了用户友好的交互体验。这种技术在现代Web应用中广泛应用，尤其在需要用户输入大量可...
JavaScript实现动态增加文件域表单
10-30
对于上传多个文件，可以通过js来动态生成文件域，下面是源代码，收藏在这里，供以后直接使用，hoho！
JavaScript表单练习.zip
12-23
1． 掌握JavaScript脚本的调用和基本语法； 2． 掌握JavaScript常用内置对象的基本应用； 3． 掌握BOM和window消息对话框的使用； 4． 掌握HTML DOM动态网页设计技术。
javascript 动态操作表单
zhoupuyue的专栏
07-07 160
function initAjax(){ var ajax = false; try{ ajax = new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ try{ ajax = new ActiveXObject("Microsoft.XMLHTTP"); }catch(E){ ajax = false; ...
javascript动态创建form表单
TO
03-13 297
//helper function to create the form function getNewSubmitForm(){var submitForm = document.createElement("FORM");document.body.appendChild(submitForm);submitForm.method = "POST";return submitForm;}//h...
JS动态操作表单
footprint01的博客
09-21 720
&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动态生成表单
weixin_42546729的博客
03-13 2524
changeItemParam : function(node,formId){ $.ajax({ type: "GET", url: "/rest/item/param/" + node.id, statusCode:{ 200 : functio...
JS - 生成动态表格
chengenghc的博客
03-11 421
<script> var datas = [{ name: '卡卡西', subject: 'JavaScript', grade: 100, }, { name: '鸣人', subject: 'JavaScript', grade: 80, }, { name: '小樱', .
JavaScript动态生成表格
最新发布
qq_74315744的博客
10-26 821
【代码】JavaScript动态生成表格。
JavaScript动态表格，全选，以及表单验证
运算符重载之String
04-27 208
动态表格动态表格，全选表单验证 动态表格，全选 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no...
js动态生成form表单并提交
热门推荐
a1470037986的博客
01-31 1万+
在提交json数据时，可能会出后台无法解析数据的bug，碰到这个不要怕，在提交数据前用js转一下json就好了，下面我写的代码里有转json的代码，如果只是传单个数据，就没必要写成json格式了。 $("#exceldown").click(function() { var data5 = []; //获取当前页的数据行 var rows = $('#month_
javascript事件高级（动态表单的生成）
weixin_45785652的博客
05-25 268
javascript事件高级（动态表单的生成） 动态生成表单案例 1 模拟数据 每一行都是一个对象，每一个对象都是放在一个数组中 2. 创建行 数组中有多少条数据，就应该创建多少行 遍历模拟的数组 每遍历一次 创建行 document.createElement(‘tr’) 还需要把创建的行丢在谁里面？放在 tbody 里面 3. 创建单元格 遍历对象，对象里面有多少个属性，意味着有多少个单元格 for…in for(var key in obj){} 循环体里面 创建相应的 td，每创建一个td 一定
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值