在應用程序的開發(fā)中，有些輸入信息是動態(tài)的，比如我們要注冊一個員工的工作經(jīng)歷，比如下圖
如果做成死的，只能填寫三個，如果是四個呢？或者更多呢，那不是添加不上去了嗎，所以這樣固然不好，我們可以用動態(tài)添加表格行實現(xiàn)，如下圖，添加一行，輸入一行信息，這樣比較靈活
下面我們就來看看如何在asp和asp.net中結(jié)合javascript來實現(xiàn)這種效果：
首先，動態(tài)添加表格是要在前臺實現(xiàn)的，當然后臺也可以，不過可能要用到ajax，很麻煩，所以最好采用javascript來實現(xiàn)，下面來介紹動態(tài)添加表格行的兩種方式：
第一種：源碼
Javascript:
script type="text/javascript">
/**//*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; itabObj.rows.length;i++){
if(tabObj.getElementsByTagName('img')[i]==btnObj){
tabObj.deleteRow(i+targPos);
}
}
}
/script>
Html
table id=tabUserInfo border=1 width="720">
tr>
td>姓名/td>
td>性別/td>
td>年齡/td>
td>愛好/td>
td>Delete/td>
/tr>
tr style="display:none" id=trUserInfo>
td id=tdUserInfo>input id=username name=username >/td>
td id=tdUserInfo>input id=usersex name=usersex>/td>
td id=tdUserInfo>input id=userage name=userage>/td>
td id=tdUserInfo>input id=userlove name=userlove>/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>
在這里有點要注意：tr style="display:none" id=trUserInfo> 主要是為了，添加數(shù)據(jù)的時候，文本框中的值都是空的，要不然添加的 新行都是有值的，這樣很不好，當然了，為了防止讀取的是空值，在后面獲得數(shù)據(jù)組的時候，我們從索引1開始獲得值，這個在后面會講到
第二種方式：
JavaScript
script type="text/javascript">
function addRow()
{
var root = document.getElementById("tbody")
var allRows = root.getElementsByTagName('tr');
var allCells = allRows[0].getElementsByTagName('td');
var newRow = root.insertRow();
var newCell0 = newRow.insertCell();
var newCell1 = newRow.insertCell();
var newCell2 = newRow.insertCell();
var newCell3 = newRow.insertCell();
newCell0.innerHTML = allCells[0].innerHTML;
newCell1.innerHTML = allCells[1].innerHTML;
newCell2.innerHTML = allCells[2].innerHTML;
newCell3.innerHTML = allCells[3].innerHTML;
}
function removeRow(r)
{
var root = r.parentNode;
root.deleteRow(r);
}
/script>
Html
table border="1">
tr>
td>aaaa/td>
td>bbbb/td>
td>cccc/td>
td>操作/td>
/tr>
tr>
td>select>/select>/td>
td>input id="Text1" type="text" />/td>
td>input id="Text2" type="text"/>/td>
td>/td>
/tr>
tbody id="tbody">
tr style="display:none">
td>select>/select>/td>
td>input id="a" type="text" />/td>
td>input id="b" type="text"/>/td>
td>input type="button" value="remove" onclick="removeRow(this.parentNode.parentNode)"/>/td>
/tr>
/tbody>
/table>
table>tr>td>input type="button" value="add" onclick="addRow()" />/td>/tr>/table>
注意：和第一個基本類似，如果你希望默認的情況下就有一行，那么可以靜態(tài)的添加一行
下面，就來看看如何通過后臺完成對其操作，比如對新增行的修改，刪除，添加等
首先說一下數(shù)據(jù)庫的問題
對于這些需要動態(tài)添加的表格行的記錄，我們需要重新放到放到一個表里，就是單獨做一個表，比如上面說到的工作經(jīng)歷的 問題當然了，員工要有一個員工表，記錄姓名，年齡，身份證，學歷等信息，對于工作經(jīng)歷這塊，就需要單獨做一個工作經(jīng)歷表，然后根據(jù)外鍵，建立他們之間的關系，這是數(shù)據(jù)庫方面的設計
下面就來看看如何在asp中實現(xiàn)這些
添加操作：
代碼：
!--#include file="inc/conn.asp" -->
%
if request("tj")="添 加" then
set rs=server.CreateObject("adodb.RecordSet")
strsql="select * from tb_person"
rs.open strsql,conn,2,3
for i =1 to request("username").count
rs.addnew()
rs("userName")=request("username")(i)
rs("sex")=request("usersex")(i)
rs("age")=request("userage")(i)
rs("aihao")=request("userlove")(i)
rs.update
next
end if
%>
html>
head>
script src="myjs.js">/script>
/head>
body>
form name=frmUserInfo action="user_list1.asp" method=post>
br>
table id=tabUserInfo border=1 width="720">
tr>
td>姓名/td>
td>性別/td>
td>年齡/td>
td>愛好/td>
td>Delete/td>
/tr>
tr style="display:none" id=trUserInfo>
td id=tdUserInfo>input id=username name=username >/td>
td id=tdUserInfo>input id=usersex name=usersex>/td>
td id=tdUserInfo>input id=userage name=userage>/td>
td id=tdUserInfo>input id=userlove name=userlove>/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="添 加" name="tj" />/td>/tr>
/table>
/form>
/body>
注意：在這里我們可以直接通過request("username")獲得username列的數(shù)組值，通過調(diào)試可以看到，第一個(索引為0)值為",",所以獲得值的時候我們要從索引為1開始讀取，然后逐一添加操作即可
修改:
首先根據(jù)外鍵循環(huán)讀取數(shù)據(jù)到一個表格里，代碼：
form name=frmUserInfo action="user_list1.asp" method=post>
br>
table border=1 width="720">
tr>
td>姓名/td>
td>性別/td>
td>年齡/td>
td>愛好/td>
td>Delete/td>
/tr>
%
set rs=server.CreateObject("adodb.RecordSet")
strsql="select * from tb_person"
rs.open strsql,conn,2,3
do while not rs.eof
%>
tr id=trUserInfo1>
td id=tdUserInfo1>input id=username1 name=username1 value="%=rs("userName")%>" >/td>
td id=tdUserInfo1>input id=usersex1 name=usersex1 value="%=rs("age")%>">/td>
td id=tdUserInfo1>input id=userage1 name=userage value="%=rs("sex")%>">/td>
td id=tdUserInfo1>input id=userlove1 name=userlove value="%=rs("aihao")%>">/td>
td id=tdUserInfo>
input type="submit" value="刪除" />
!--img alt="Delete" onClick="deleteRow(document.all.tabUserInfo,1,this)"> -->/td>
/tr>
%
rs.movenext
loop
%>
table id=tabUserInfo border=1 width="720">
tr>
td>/td>
td>/td>
td>/td>
td>/td>
td>/td>
/tr>
tr style="display:none" id=trUserInfo>
td id=tdUserInfo>input id=username name=username >/td>
td id=tdUserInfo>input id=usersex name=usersex>/td>
td id=tdUserInfo>input id=userage name=userage>/td>
td id=tdUserInfo>input id=userlove name=userlove>/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>
我的思路是把以前添加的記錄和現(xiàn)在要添加的記錄行分開操作，如果我們要刪除記錄行，或者修改記錄行可以這樣操作
首先刪除所以記錄，然后重新添加以前的記錄和現(xiàn)在的記錄，至于代碼和添加的思路是一樣的，只不過這里面分兩個添加來完成的具體的代碼，大家可以自己嘗試一下
下面在看看在asp.net中如何實現(xiàn)
如果使用asp.net自帶的控件封裝模式，很難實現(xiàn)，所以這里我們可以采用上面講到的asp的思想來完成
js和html都一樣，不一樣的是后臺的代碼：
比如說添加吧
protected void Button1_Click(object sender, EventArgs e)
{
string username = Request["username"].ToString();
string[] namelist = username.Split(',');
string[] sexlist = username.Split(',');
string[] agelist = username.Split(',');
string[] lovelist = username.Split(',');
for (int i = 1; i namelist.Length; i++)
{
//獲得傳遞過來的值，對其操作
string name = namelist[i].ToString();
string usersex = sexlist[i].ToString();
string userage = agelist[i].ToString();
string userlove = agelist[i].ToString();
//對其操作，比如添加修改等
}
}
在這里我們使用Request["username"]來獲得值，頁面用的是html標簽，不是服務器端的控件，不用使用.value或者Text來實現(xiàn), 這樣就可以用asp或者jsp的思想來處理了。
同樣，修改和刪除的也可以使用asp或者jsp的思想來處理。
或者從提交到處理完全采用jsp和asp的思想，創(chuàng)建一個HttpHandler，把數(shù)據(jù)都提交到這里面處理，這樣也可以，不過第一種方法好些，這樣容易獲得值并處理，不需要轉(zhuǎn)換什么的。
具體的問題具體對待，比如需要默認就有一行，這個時候就需要在員工表里添加工作記錄的字段，這一行的記錄都添加到員工表里，然后編輯刪除的時候需要先編輯，然后進行兩個添加等。
大體實現(xiàn)添加數(shù)據(jù)行的思路就是這樣，有什么問題，希望大家給予指正....
您可能感興趣的文章:- JSP實現(xiàn)添加功能和分頁顯示實例分析
- jsp中兩個框中內(nèi)容互換可以添加也可以移除
- jsp連接MySQL操作GIS地圖數(shù)據(jù)實現(xiàn)添加point的功能代碼
- JSP+Ajax 添加、刪除多選框
- JSP使用JDBC完成動態(tài)驗證及采用MVC完成數(shù)據(jù)查詢的方法
- jsp操作MySQL實現(xiàn)查詢/插入/刪除功能示例
- 高效的jsp分頁查詢
- JSP簡單添加,查詢功能代碼
