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 相关文章推荐
JS简单实现元素复制示例附图
Nov 19 Javascript
js跳转页面方法总结
Jan 29 Javascript
node.js中的fs.chmod方法使用说明
Dec 18 Javascript
JavaScript中setUTCFullYear()方法的使用简介
Jun 12 Javascript
jQuery下拉友情链接美化效果代码分享
Aug 26 Javascript
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
Dec 28 Javascript
深入理解JavaScript创建对象的多种方式以及优缺点
Jun 01 Javascript
使用cropper.js裁剪头像的实例代码
Sep 29 Javascript
Vue中的组件及路由使用实例代码详解
May 22 Javascript
vue router动态路由设置参数可选问题
Aug 21 Javascript
VUE项目中加载已保存的笔记实例方法
Sep 14 Javascript
jQuery实现的移动端图片缩放功能组件示例
May 01 jQuery
使用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程序
2012/02/04 PHP
如何使用php判断服务器是否是HTTPS连接
2013/07/05 PHP
php实现的漂亮分页方法
2014/04/17 PHP
php 中奖概率算法实现代码
2017/01/25 PHP
Yii2框架操作数据库的方法分析【以mysql为例】
2019/05/27 PHP
javascript中RegExp保留小数点后几位数的方法分享
2013/08/13 Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
2014/06/24 Javascript
indexOf 和 lastIndexOf 使用示例介绍
2014/09/02 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
2014/09/11 Javascript
jquery mobile 移动web(5)
2015/12/20 Javascript
jQuery Validate 相关参数及常用的自定义验证规则
2017/03/06 Javascript
理解javascript async的用法
2017/08/22 Javascript
详解vue axios用post提交的数据格式
2018/08/07 Javascript
vue-router的使用方法及含参数的配置方法
2018/11/13 Javascript
mock.js模拟前后台交互
2019/07/25 Javascript
[54:57]DOTA2-DPC中国联赛定级赛 Aster vs DLG BO3第二场 1月8日
2021/03/11 DOTA
python编程使用selenium模拟登陆淘宝实例代码
2018/01/25 Python
Python3实现的简单验证码识别功能示例
2018/05/02 Python
Numpy之文件存取的示例代码
2018/08/03 Python
Python高级特性切片(Slice)操作详解
2018/09/27 Python
python读取xlsx的方法
2018/12/25 Python
Python设计模式之职责链模式原理与用法实例分析
2019/01/11 Python
Python-接口开发入门解析
2019/08/01 Python
Python Subprocess模块原理及实例
2019/08/26 Python
python中执行smtplib失败的处理方法
2020/07/01 Python
Pandas中两个dataframe的交集和差集的示例代码
2020/12/13 Python
Superdry极度乾燥官网:日本街头风格,纯英国制造品牌
2016/10/31 全球购物
windeln官方海外旗舰店:德淘超人气母婴超市
2017/12/15 全球购物
采购类个人求职的自我评价
2014/02/18 职场文书
3.12植树节活动总结2014
2014/03/13 职场文书
酒店管理专业自荐信
2014/05/23 职场文书
土地转让协议书
2014/09/27 职场文书
应急管理工作总结2015
2015/05/04 职场文书
预防艾滋病宣传活动总结
2015/05/09 职场文书
数学复习课教学反思
2016/02/18 职场文书
PHP中国际化的字符串排序和比较对象详解
2021/08/23 PHP