javascript动态添加表格数据行(ASP后台数据库保存例子)


Posted in Javascript onMay 08, 2010

在很多web应用中,我们会遇到很多需要动态插入多行纪录的地方。比如,在人才网站上,我们填写简历的时候,我们要填写我们的项目经验,我们可以根据自己的实际情况动态的添加条数,这种不是以单独页面的形式添加,这种动态添加是在同一个页面下动态添加,最后再一起提交到服务器保存到数据库中。

本文,我将以一个类似的例子来做一个前台用Javascript动态添加数据项,后台保存到数据库的例子。

浏览器:IE.6.0
后台:ASP (VBScript )
前台:HTML + JavaScript

HTML代码:

<script src="myjs.js"></script> <form name=frmUserInfo action="saveInfo.asp" method=post> 
<table> 
<tr> 
<td>Name:<input id=txtName name=Name></td> 
<td>Sex:<input id=txtSex name=Sex></td> 
</tr> 
</table> 
<br> 
<table id=tabUserInfo border=1> 
<tr> 
<td>Project name:</td> 
<td>Befre description:</td> 
<td>Begin date:</td> 
<td>Finished date:</td> 
<td>Delete</td> 
</tr> 
<tr style="display:none" id=trUserInfo> 
<td id=tdUserInfo><input id=txtPName name=ProjectName></td> 
<td id=tdUserInfo><input id=txtDesc name=Desc></td> 
<td id=tdUserInfo><input id=txtBDate name=BDate></td> 
<td id=tdUserInfo><input id=txtFDate name=FDate></td> 
<td id=tdUserInfo><img alt="Delete" onclick="deleteRow(document.all.tabUserInfo,1,this)"></td> 
</tr> 
<tr> 
<td><input type=button value="Add" onclick="addRow(document.all.tabUserInfo,null,1,1)"></td> 
</tr> 
</table> 
<table> 
<tr><td><input type=submit value=Submit><input type=reset></td></tr> 
</table> 
</form>

JS代码:

/**//*This function is use to add one row dynamicly 
* tabObj : Target table 
* colNum: The number of columns that of a row in table 
* sorPos: The source of the new row. 
* targPos: The position where the new row will be added. 
* 
*/ 
function addRow(tabObj,colNum,sorPos,targPos)...{ 
var nTR = tabObj.insertRow(tabObj.rows.length-targPos); // Insert a new row into appointed table on the 
//appointed position. 
var TRs = tabObj.getElementsByTagName('TR'); // Get TRs collection from the appointed table 
var sorTR = TRs[sorPos]; // Positioned the sorTR 
var TDs = sorTR.getElementsByTagName('TD'); // Get TDs collection from the appointed row 
if(colNum==0 || colNum==undefined || colNum==isNaN)...{ 
colNum=tabObj.rows[0].cells.length; 
} var ntd = new Array(); // Create a new TDs array 
for(var i=0; i< colNum; i++)...{ // Traverl the TDs in row 
ntd[i] = nTR.insertCell(); // Create new cell 
ntd[i].id = TDs[0].id; // copy the TD's id to new cell. | Attention! The TDs's 
//suffix must be appointed 
ntd[i].innerHTML = TDs[i].innerHTML; // copy the value in ntd[i]'s innerHTML from corresponding TDs 
} 
} 
/**//* This function is use to remove appointed row in appointed table 
* tabObj: the appointed table 
* targPos: target row position 
* btnObj: currently clicked delete image button 
* 
*/ 
function deleteRow(tabObj,targPos,btnObj)...{ //Remove table row 
for(var i =0; i<tabObj.rows.length;i++)...{ 
if(tabObj.getElementsByTagName('img')[i]==btnObj)...{ 
tabObj.deleteRow(i+targPos); 
} 
} 
}

前台代码总结:
上面的代码有一个要注意的地方,那就是原始行 <tr style="display:none" id=trUserInfo>,我们设置了样式为Display:none,这是因为,下面js中添加行采用的是newTD.innerHTML = sourceTD.innerHTML的方式,即直接把已经存在的列中的内容直接复制到新添加的列的innerHTML属性中,所以隐藏“数据源“列被防止用户删除而出现"Object excepted" 错误。

VBScript 代码:

<% 
'###### Begin Transcation ##### 
conn.beginTrans ' Start a transaction 
sql = "insert into UserInfo(username,sex) values(" 
sql=sql&"'"& request("Name") &"'," 
sql=sql&"'"& request("Sex") &"')" 
Response.Write sql&"<p>" 
conn.execute(sql) if request("ProjectName").count>0 then 
dim maxid 
maxid = 1 
sql = "select max(id) as maxid from UserInfo" 
set rs = conn.execute(sql) 
maxid = rs("maxid") 
rs.close 
set rs = nothing 

for i =1 to request("ProjectName").count 
sql = "insert into ProjectInfo(uid,pname,pdesc,bdate,fdate) values(" 
sql=sql&""& maxid &"," 
sql=sql&"'"& request("ProjectName")(i) &"'," 
sql=sql&"'"& request("Desc")(i) &"'," 
sql=sql&"'"& request("BDate")(i) &"'," 
sql=sql&"'"& request("FDate")(i) &"')" 
Response.Write " "&sql&"<br>" 
conn.execute(sql) 
next 
end if 
if conn.Errors.count > 0 then ' If occus any error in the transaction , roll back transcation 
conn.RollBackTrans 
else ' If not error, commit the transcation 
conn.commitTrans 
end if 
conn.close 
set conn = nothing 
%>

后台代码总结:
获取多数据的方法是调用request("").count,以count的数目来确定要往主表插入的子表纪录次数。 由于数据操作次数不确定,为了防止在执行数据库操作时发生异常,造成数据不一致。我们采用用事务管理。事务管理具有:原子性,一致性,等特点。可以保证数据安全。我们在数据库操作开始的时候调用conn.beginTrans打开一个事务,在数据操作结束时,用conn.Errors.count来判断在事务期间是否有错误发生,如果发生错误或异常就conn.RollBackTrans回滚。否则提交事务,完成数据库操作。

预览:
图一 :进入填写数据页面,点击Add按钮,添加一行,到图二
javascript动态添加表格数据行(ASP后台数据库保存例子)

图二:再添加一行并且填写数据到图三
javascript动态添加表格数据行(ASP后台数据库保存例子)

图三:在添加了两行数据之后,点击Submit按钮提交数据
javascript动态添加表格数据行(ASP后台数据库保存例子)

图四:提交表单后,数据库将会执行如浏览器打印的几条SQL语句,数据便成功添加到数据库。
javascript动态添加表格数据行(ASP后台数据库保存例子)

总结:
      这篇文章讲述了如何用Javascript动态地在前台添加用户输入数据的列,并且后台采用ASP技术将前台添加的数据插入数据库。
      希望对学习ASP及Javascript的朋友有所帮助。
      如果您有什么疑问,可以联系我。 如果您对本文有何意见,热烈欢迎批评指正!

Javascript 相关文章推荐
jquery 插件 web2.0分格的分页脚本,可用于ajax无刷新分页
Dec 25 Javascript
解决jQuery插件tipswindown与hintbox冲突
Nov 05 Javascript
Javascript的各种节点操作实例演示代码
Jun 27 Javascript
JS过滤url参数特殊字符的实现方法
Dec 24 Javascript
判断复选框是否被选中的两种方法
Jun 04 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
Dec 25 Javascript
详解基于Bootstrap+angular的一个豆瓣电影app
Jun 26 Javascript
three.js实现3D影院的原理的代码分析
Dec 18 Javascript
vue-router history模式下的微信分享小结
Jul 05 Javascript
手把手带你封装一个vue component第三方库
Feb 14 Javascript
vue中组件通信的八种方式(值得收藏!)
Aug 09 Javascript
java遇到微信小程序 &quot;支付验证签名失败&quot; 问题解决
Dec 22 Javascript
使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇
May 07 #Javascript
javascript 通用简单的table选项卡实现
May 07 #Javascript
jQuery 创建Dom元素
May 07 #Javascript
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
May 06 #Javascript
jQuery Selector选择器小结
May 06 #Javascript
Jquery 动态添加按钮实现代码
May 06 #Javascript
jquery DOM操作 基于命令改变页面
May 06 #Javascript
You might like
用PHP编程语言开发动态WAP页面
2006/10/09 PHP
php数组一对一替换实现代码
2012/08/31 PHP
Android ProgressBar进度条和ProgressDialog进度框的展示DEMO
2013/06/19 PHP
thinkPHP模板中for循环与switch语句用法示例
2016/11/30 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
PHP实现的curl批量请求操作示例
2018/06/06 PHP
Javascript条件判断使用小技巧总结
2008/09/08 Javascript
JQuery 常用方法基础教程
2009/02/06 Javascript
js网页侧边随页面滚动广告效果实现
2011/04/14 Javascript
javascript获取网页中指定节点的父节点、子节点的方法小结
2013/04/24 Javascript
Egret引擎开发指南之运行项目
2014/09/03 Javascript
node.js中的fs.lchownSync方法使用说明
2014/12/16 Javascript
jQuery.prop() 使用详解
2015/07/19 Javascript
jQuery中hover与mouseover和mouseout的区别分析
2015/12/24 Javascript
jquery实现一个简单的表单验证实例
2016/03/30 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
2016/08/05 Javascript
微信小程序实现登录注册tab切换效果
2020/12/29 Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
2019/01/15 Javascript
Vue实现商品分类菜单数量提示功能
2019/07/26 Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
2019/12/27 Javascript
js实现鼠标点击飘爱心效果
2020/08/19 Javascript
python将MongoDB里的ObjectId转换为时间戳的方法
2015/03/13 Python
Python记录详细调用堆栈日志的方法
2015/05/05 Python
自动化Nginx服务器的反向代理的配置方法
2015/06/28 Python
Python面向对象编程中关于类和方法的学习笔记
2016/06/30 Python
Python 3.6 读取并操作文件内容的实例
2018/04/23 Python
解决Python对齐文本字符串问题
2019/08/28 Python
Python 日志logging模块用法简单示例
2019/10/18 Python
浅析与CSS3的loading动画加载相关的transition优化
2015/05/18 HTML / CSS
CSS3实现可关闭的下拉手风琴菜单效果
2015/08/31 HTML / CSS
欧舒丹加拿大官网:L’Occitane加拿大
2017/10/29 全球购物
创伤外科专业推荐信范文
2013/11/19 职场文书
设计师求职信模板
2014/05/06 职场文书
学期个人工作总结
2015/02/13 职场文书
党员廉洁自律个人总结
2015/02/13 职场文书
准备去美国留学,那么大学申请文书应该怎么写?
2019/08/12 职场文书