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的ajax jsonp的使用解惑
Oct 09 Javascript
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
Feb 03 Javascript
jquery实现多级下拉菜单的实例代码
Oct 02 Javascript
JavaScript将字符串转换为整数的方法
Apr 14 Javascript
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
微信小程序提取公用函数到util.js及使用方法示例
Jan 10 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
May 12 Javascript
vuex + keep-alive实现tab标签页面缓存功能
Oct 17 Javascript
原生js实现点击轮播切换图片
Feb 11 Javascript
原生js实现自定义滚动条组件
Jan 20 Javascript
一道JS算法面试题——冒泡、选择排序
Apr 21 Javascript
jQuery实现广告显示和隐藏动画
Jul 04 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生成带有雪花背景的验证码
2006/10/09 PHP
php google或baidu分页代码
2009/11/26 PHP
php中时间轴开发(刚刚、5分钟前、昨天10:23等)
2011/10/03 PHP
php 获取xml接口数据的处理方法
2018/05/31 PHP
使用laravel根据用户类型来显示或隐藏字段
2019/10/17 PHP
js输出阴历、阳历、年份、月份、周示例代码
2014/01/29 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
2014/04/25 Javascript
jQuery异步获取json数据方法汇总
2014/12/22 Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
2015/09/19 Javascript
跟我学习javascript的Date对象
2015/11/19 Javascript
利用Javascript获取选择文本所在的句子详解
2017/12/03 Javascript
Vue使用Proxy监听所有接口状态的方法实现
2019/06/07 Javascript
深入理解redux之compose的具体应用
2020/01/12 Javascript
手把手教你如何编译打包video.js
2020/12/09 Javascript
[53:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第三场 6.2
2018/06/03 DOTA
python实现搜索指定目录下文件及文件内搜索指定关键词的方法
2015/06/28 Python
详解使用python crontab设置linux定时任务
2016/12/08 Python
Windows下的Python 3.6.1的下载与安装图文详解(适合32位和64位)
2018/02/21 Python
Python之lambda匿名函数及map和filter的用法
2019/03/05 Python
详解Python做一个名片管理系统
2019/03/14 Python
Python SELENIUM上传文件或图片实现过程
2019/10/28 Python
Python将list元素转存为CSV文件的实现
2020/11/16 Python
Python爬虫实现selenium处理iframe作用域问题
2021/01/27 Python
车间班长岗位职责
2013/11/30 职场文书
好矿嫂事迹材料
2014/01/21 职场文书
企业年会主持词
2014/03/27 职场文书
银行求职自荐信
2014/06/30 职场文书
违反交通法规检讨书
2014/09/10 职场文书
预备党员期盼十八届四中全会召开思想汇报
2014/10/17 职场文书
2014年医务科工作总结
2014/12/18 职场文书
大学生求职信怎么写
2015/03/19 职场文书
python 如何将两个实数矩阵合并为一个复数矩阵
2021/05/19 Python
pandas数值排序的实现实例
2021/07/25 Python
Nginx中使用Lua脚本与图片的缩略图处理的实现
2022/03/18 Servers
vue-cli3.x配置全局的scss的时候报错问题及解决
2022/04/30 Vue.js
Hive日期格式转换方法总结
2022/06/25 数据库