當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
Asp.net(asp,jsp)+JavaScript动态实现添加数据行
生活随笔
收集整理的這篇文章主要介紹了
Asp.net(asp,jsp)+JavaScript动态实现添加数据行
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?????????? 在應用程序的開發中，有些輸入信息是動態的，比如我們要注冊一個員工的工作經歷，比如下圖
如果做成死的，只能填寫三個，如果是四個呢？或者更多呢，那不是添加不上去了嗎，所以這樣固然不好，我們可以用動態添加表格行實現，如下圖，添加一行，輸入一行信息，這樣比較靈活
下面我們就來看看如何在asp和asp.net中結合javascript來實現這種效果：
??? 首先，動態添加表格是要在前臺實現的，當然后臺也可以，不過可能要用到ajax，很麻煩，所以最好采用javascript來實現，下面來介紹動態添加表格行的兩種方式：
第一種：源碼
Javascript:
?
View Code <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;?i<tabObj.rows.length;i++){?
if(tabObj.getElementsByTagName('img')[i]==btnObj){?
tabObj.deleteRow(i+targPos);?
}?
}?
}?
????</script>
Html
?
View Code <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> 主要是為了，添加數據的時候，文本框中的值都是空的，要不然添加的?新行都是有值的，這樣很不好，當然了，為了防止讀取的是空值，在后面獲得數據組的時候，我們從索引1開始獲得值，這個在后面會講到
第二種方式：
JavaScript
?
View Code <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
?
View Code <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>
?
?注意：和第一個基本類似，如果你希望默認的情況下就有一行，那么可以靜態的添加一行
?下面，就來看看如何通過后臺完成對其操作，比如對新增行的修改，刪除，添加等
?首先說一下數據庫的問題
? 對于這些需要動態添加的表格行的記錄，我們需要重新放到放到一個表里，就是單獨做一個表，比如上面說到的工作經歷的 問題當然了，員工要有一個員工表，記錄姓名，年齡，身份證，學歷等信息，對于工作經歷這塊，就需要單獨做一個工作經歷表，然后根據外鍵，建立他們之間的關系，這是數據庫方面的設計
? 下面就來看看如何在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列的數組值，通過調試可以看到，第一個(索引為0)值為",",所以獲得值的時候我們要從索引為1開始讀取，然后逐一添加操作即可
修改:
首先根據外鍵循環讀取數據到一個表格里，代碼：
?
View Code <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>?
我的思路是把以前添加的記錄和現在要添加的記錄行分開操作，如果我們要刪除記錄行，或者修改記錄行可以這樣操作
首先刪除所以記錄，然后重新添加以前的記錄和現在的記錄，至于代碼和添加的思路是一樣的，只不過這里面分兩個添加來完成的具體的代碼，大家可以自己嘗試一下
下面在看看在asp.net中如何實現
如果使用asp.net自帶的控件封裝模式，很難實現，所以這里我們可以采用上面講到的asp的思想來完成
js和html都一樣，不一樣的是后臺的代碼：
比如說添加吧
?
View Code 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來實現,?這樣就可以用asp或者jsp的思想來處理了
??? 同樣修改和刪除的也可以使用asp或者jsp的思想來處理
??? 或者從提交到處理完全采用jsp和asp的思想，創建一個HttpHandler，把數據都提交到這里面處理，這樣也可以，不過第一種方法好些，這樣容易獲得值并處理，不需要轉換什么的
??? 具體的問題具體對待，比如需要默認就有一行，這個時候就需要在員工表里添加工作記錄的字段，這一行的記錄都添加到員工表里，然后編輯刪除的時候需要先編輯，然后進行兩個添加等。
??? 大的思路就是這樣，有什么問題，希望大家給予指正....
?
轉載于:https://www.cnblogs.com/shuang121/archive/2011/12/07/2279402.html
總結
以上是生活随笔為你收集整理的Asp.net(asp,jsp)+JavaScript动态实现添加数据行的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 大半个完整
- 下一篇： Spring中使用JDBC