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

在很多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按钮,添加一行,到图二

图二:再添加一行并且填写数据到图三

图三:在添加了两行数据之后,点击Submit按钮提交数据

图四:提交表单后,数据库将会执行如浏览器打印的几条SQL语句,数据便成功添加到数据库。

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

时间: 2016-05-08

javascript动态添加表格数据行(ASP后台数据库保存例子)_javascript技巧的相关文章

ITOO---MVC3.0动态添加表格的行数并Controller中获取添加数据

MVC3.0动态添加表格的行数并Controller中获取添加数据            最近由于项目的中的相关需求,需要在MVC的视图中动态的添加添加数据的行数,并将前台输入的多行数据在Controller中获得传回服务端.本文将介绍如何从MVC的View端动态添加数据行数并将输入的数据在Controller中获得.            问题分析          一.设计前台显示页面(View).            视图中样式 @*添加上课班信息窗口*@ <div id="Add

javascript 动态添加表格行

javascript|动态 介绍如何使用javascript动态添加表格行,并对其中的方法做详细的说明 动态添加表格行 文/Ray  表格部分代码如下: <table id="testTbl" border=1> <tr id="tr1"> <td width=6%><input type=checkbox id="box1"></td> <td id="b"&

JavaScript使用HTML5的window.postMessage实现跨域通信例子_javascript技巧

JavaScript由于同源策略的限制,跨域通信一直是棘手的问题.当然解决方案也有很多: 1.document.domain+iframe的设置,应用于主域相同而子域不同: 2.利用iframe和location.hash,数据直接暴露在了url中,数据容量和类型都有限 3.Flash LocalConnection, 对象可在一个 SWF 文件中或多个 SWF 文件间进行通信, 只要 在同一客户端就行,跨应用程序, 可以跨域. window.name 保存数据以及跨域 iframe 静态代理动

javascript动态创建表格及添加数据实例详解

  本文实例讲述了javascript动态创建表格及添加数据的方法.分享给大家供大家参考.具体分析如下: 1. 动态创建表格(代码不兼容IE6) ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

asp.net动态删除表格的行

问题描述 asp.net动态删除表格的行 当点击表格的某行时,将该行ID赋值给Text.value._Page_Load里添加代码使得刷新页面时该行被删除大神们帮帮我,是在是找不出错误来了.就是没有办法实现删除行的功能.后天获取Text1.Value是什么都没有,为什么会这样呢_前台代码: <%@ Page Language=""C#"" AutoEventWireup=""true"" CodeFile="&

使用javascript动态添加数据到 HTML 页面

今天简单的学习了一下有关对象字面量的定义和 javascript 如何取出对象字面量的值的知识,javascript 动态添加数据到 HTML 页面的问题. [学习目标]有如下的一组数据通过 Ajax 传递过来: var dataList = [ { state: 2, // 0:sharing 1:unJoin 2:sharingEnd name: '客户1', phone: 13675896031 }, { state: 1, // 0:sharing 1:unJoin 2:sharingE

Javascript动态创建表格及删除行列的方法

 本文实例讲述了Javascript动态创建表格及删除行列的方法.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68

JavaScript动态添加style节点的方法

 本文实例讲述了JavaScript动态添加style节点的方法.分享给大家供大家参考.具体如下: 1 2 3 4 5 6 7 8 9 10 var css = 'h1 { background: red; }', head = document.getElementsByTagName('head')[0], style = document.createElement('style'); style.type = 'text/css'; if(style.styleSheet){ style

利用js动态添加删除table行的示例代码

 本篇文章主要是对利用js动态添加删除table行的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 如下所示:    代码如下: //动态添加行 function addRow(){    var table = document.getElementById("tableID");    var newRow = table.insertRow(); //创建新行    var newCell1 = newRow.insertCell(); //创建新单元格    

JavaScript动态改变表格单元格内容的方法

 这篇文章主要介绍了JavaScript动态改变表格单元格内容的方法,涉及javascript操作html中table表格的技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了JavaScript动态改变表格单元格内容的方法.分享给大家供大家参考.具体如下: JavaScript动态改变表格单元格的内容,下面的代码通过修改单元格的innerHTML来修改单元格内容 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21