事先声明引用了别人的代码，做了一些细节上的改动。
使用模板，动态插入行
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"><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="插入一行" 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>
还是那句老话，自己动手做做看，就知道什么意思了，其乐无穷哦！
分享到：
[i][/i][color=darkred][/color][size=x-large][/size][align=center][/align]
相关推荐
JavaScript动态表单是一种在网页上创建、修改或交互操作表单元素的技术，它极大地提升了用户界面的灵活性和用户体验。在Web开发中，JavaScript扮演着关键角色，为表单提供了丰富的功能，如验证输入、动态添加删除...
在JavaScript编程中，动态添加表单是一项常见的需求，特别是在构建具有高度交互性和可扩展性的Web应用时。通过动态创建和管理表单元素，开发者可以轻松应对用户可能的需求变化，实现XML数据的加载和显示，从而增强...
在表单验证中，JavaScript可以通过监听表单的`submit`事件来阻止默认提交行为，然后逐个检查输入字段的值。可以使用`document.getElementById`或`document.querySelector`等方法获取表单元素，再利用`value`属性获取...
1. **表单元素创建**：通过JavaScript，开发者可以动态创建和操纵HTML表单元素，如输入框(input)、选择框(select)、复选框(checkbox)和按钮(button)等。 2. **数据验证**：JavaScript提供了实时验证用户输入的能力...
在Java开发领域，动态表单设计是一项重要的技术，它允许开发者根据业务需求创建和修改表单，无需编写大量的HTML和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进行表单验证的各种方法和技术，旨在为开发者提供全面的参考。以下是对这个主题的详细阐述： 一、表单验证的重要性 表单验证是确保用户输入数据有效性和安全...