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 相关文章推荐
connect中间件session、cookie的使用方法分享
Jun 17 Javascript
下拉框select的绑定示例
Sep 04 Javascript
javascript继承的六大模式小结
Apr 13 Javascript
jQuery添加删除DOM元素方法详解
Jan 18 Javascript
基于canvas实现的钟摆效果完整实例
Jan 26 Javascript
canvas实现图片根据滑块放大缩小效果
Feb 24 Javascript
ES6扩展运算符的用途实例详解
Aug 20 Javascript
vue发送ajax请求详解
Oct 09 Javascript
详解vue中v-bind:style效果的自定义指令
Jan 21 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
Sep 16 Javascript
JS实现公告上线滚动效果
Jan 10 Javascript
uniapp开发小程序的经验总结
Apr 08 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来自动调用不同服务器上的flash
2006/10/09 PHP
php 静态变量与自定义常量的使用方法
2010/01/26 PHP
php 正确解码javascript中通过escape编码后的字符
2010/01/28 PHP
PHP判断指定时间段的2个方法
2014/03/14 PHP
php内嵌函数用法实例
2015/03/20 PHP
TP5框架实现一次选择多张图片并预览的方法示例
2020/04/04 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
js arguments对象应用介绍
2012/11/28 Javascript
jQuery使用数组编写图片无缝向左滚动
2012/12/11 Javascript
jquery控制表单输入框显示默认值的方法
2015/05/22 Javascript
浅析javascript的return语句
2015/12/15 Javascript
JS实现队列与堆栈的方法
2016/04/21 Javascript
JS动态插入并立即执行回调函数的方法
2016/04/21 Javascript
jQuery基于扩展实现的倒计时效果
2016/05/14 Javascript
浅谈js中调用函数时加不加括号的问题
2016/07/28 Javascript
jQuery自定义图片上传插件实例代码
2017/04/04 jQuery
原生js简单实现放大镜特效
2017/05/16 Javascript
本地存储localStorage用法详解
2017/07/31 Javascript
浅谈react受控组件与非受控组件(小结)
2018/02/09 Javascript
vue-router权限控制(简单方式)
2018/10/29 Javascript
javascriptvoid(0)含义以及与&quot;#&quot;的区别讲解
2019/01/19 Javascript
JS数组扁平化(flat)方法总结详解
2019/06/24 Javascript
python检测主机的连通性并记录到文件的实例
2018/06/21 Python
python 解决动态的定义变量名,并给其赋值的方法(大数据处理)
2018/11/10 Python
Python入门Anaconda和Pycharm的安装和配置详解
2019/07/16 Python
Python 面向对象之封装、继承、多态操作实例分析
2019/11/21 Python
详解python tkinter模块安装过程
2020/01/06 Python
将 Ubuntu 16 和 18 上的 python 升级到最新 python3.8 的方法教程
2020/03/11 Python
HTML5 Canvas标签使用收录
2009/07/07 HTML / CSS
红色康乃馨酒店:Red Carnation Hotels
2017/06/22 全球购物
LN-CC日本:高端男装和女装的奢侈时尚目的地
2019/09/01 全球购物
绿色出行口号
2014/06/18 职场文书
催款函范文
2015/06/24 职场文书
幼儿园亲子活动感想
2015/08/07 职场文书
庆祝教师节主题班会
2015/08/17 职场文书
Canvas绘制像素风图片的示例代码
2021/09/25 HTML / CSS