javascript动态添加表格数据行(ASP后台数据库保存例子)
发布时间:2024-02-27 11:17:31
在很多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按钮,添加一行,到图二
图四:提交表单后,数据库将会执行如浏览器打印的几条SQL语句,数据便成功添加到数据库。
总结:
这篇文章讲述了如何用Javascript动态地在前台添加用户输入数据的列,并且后台采用ASP技术将前台添加的数据插入数据库。
希望对学习ASP及Javascript的朋友有所帮助。


猜你喜欢
- 1、performance schema:介绍 在MySQL5.7中,performance schema有很大改进
- RSS 是一个可用多种扩展来表示的缩写:“RDF 站点摘要(RDF Site Summary)”、“真正简单的辛迪加(Really Simp
- 使用mysql5.5,突然root密码忘记,怎么也登录不了,很急人,该怎么解决呢?下面通过本文给大家介绍mysql5.5忘记root密码的解
- 1.get_dummies()pandas.get_dummies(data, prefix=None, prefix_sep='_
- 前言有时候正则表达式不只是匹配一下什么数字/邮箱/身份证/日期等等,还需要匹配某一段文字,并按照既定格式提取其中的某些值.场景一:提取SAM
- 从PJBlog 2.7开始,验证码的功能就很好很强大了,但是同时也给手工输入带来了不小的麻烦——经常输错。之前我写了一个《自己写的一个PJB
- cuda上tensor的定义a = torch.ones(1000,1000,3).cuda()某一gpu上定义cuda1 = torch.
- pandas遍历每行并累加进行条件过滤 本次记录主要实现对每行进行排序,并保留前80%以前的偏好。思路:将每行的概率进行排序,然后
- SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO CREATE function [dbo]
- 我们前面介绍的Selenium的WebDriver测试方法是基于网页来进行的。之前的例子都是用简单的网页来操作,可能体会不到网页的加载过程,
- mysql> select 'name',id from table_b; //'name' 不在ta
- fixHtmlTag version 0.2 这个版本解决了上次遗留的问题,即就近闭合和嵌套闭合问题。具体可以看代码的注释。 <?ph
- 起因因为一些事情,需要将域名解析为ip地址,想到Python作为万能语言,就用Python来实现这个功能代码import socketurl
- 前阵子刚完成一个B/S架构的学校办公系统,体会就是表太多,文件太多,而每个文件中类似的操作(代码)也太多了,例如学生信息和教师信息操作,st
- 本文实例讲述了python追加元素到列表的方法。分享给大家供大家参考。具体实现方法如下:scores = ["1",&q
- 重试指的是当加载出错时,有能力重新发起加载组件的请求。异步组件加载失败后的重试机制,与请求服务端接口失败后的重试机制一样。所以,先来讨论接口
- UTC时间转换,最终得到的都是UTC时间。简单来说就是:时间戳(timestamp) 转换-> UTC显示时间(datetime),使
- 从小的方面讲,帮助一般是指:手册、说明书、文档、FAQ 等等。从大的方面讲,可以是交互过程中的提示、指引、演示等信息,帮助无处不在!这一切,
- 功能说明: 滑动展开/收缩广告效果,可指定:广告完全展开时的停留时间,最大高度。兼容浏览器:IE5.0+、FF1.06+、Opera8.0+
- 在pytest自动化测试中,如果只是简单的从应用的角度来说,完全可以不去了解pytest中的显示信息的部分以及原理,完全可以通过使用推荐的p