javascript
Asp.net(asp,jsp)+JavaScript动态实现添加数据行
?????????? 在應(yīng)用程序的開(kāi)發(fā)中，有些輸入信息是動(dòng)態(tài)的，比如我們要注冊(cè)一個(gè)員工的工作經(jīng)歷，比如下圖
如果做成死的，只能填寫(xiě)三個(gè)，如果是四個(gè)呢？或者更多呢，那不是添加不上去了嗎，所以這樣固然不好，我們可以用動(dòng)態(tài)添加表格行實(shí)現(xiàn)，如下圖，添加一行，輸入一行信息，這樣比較靈活
下面我們就來(lái)看看如何在asp和asp.net中結(jié)合javascript來(lái)實(shí)現(xiàn)這種效果：
??? 首先，動(dòng)態(tài)添加表格是要在前臺(tái)實(shí)現(xiàn)的，當(dāng)然后臺(tái)也可以，不過(guò)可能要用到ajax，很麻煩，所以最好采用javascript來(lái)實(shí)現(xiàn)，下面來(lái)介紹動(dòng)態(tài)添加表格行的兩種方式：
第一種：源碼
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>愛(ài)好</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>?
在這里有點(diǎn)要注意：<tr? style="display:none" id=trUserInfo> 主要是為了，添加數(shù)據(jù)的時(shí)候，文本框中的值都是空的，要不然添加的?新行都是有值的，這樣很不好，當(dāng)然了，為了防止讀取的是空值，在后面獲得數(shù)據(jù)組的時(shí)候，我們從索引1開(kāi)始獲得值，這個(gè)在后面會(huì)講到
第二種方式：
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>
?
?注意：和第一個(gè)基本類(lèi)似，如果你希望默認(rèn)的情況下就有一行，那么可以靜態(tài)的添加一行
?下面，就來(lái)看看如何通過(guò)后臺(tái)完成對(duì)其操作，比如對(duì)新增行的修改，刪除，添加等
?首先說(shuō)一下數(shù)據(jù)庫(kù)的問(wèn)題
? 對(duì)于這些需要?jiǎng)討B(tài)添加的表格行的記錄，我們需要重新放到放到一個(gè)表里，就是單獨(dú)做一個(gè)表，比如上面說(shuō)到的工作經(jīng)歷的 問(wèn)題當(dāng)然了，員工要有一個(gè)員工表，記錄姓名，年齡，身份證，學(xué)歷等信息，對(duì)于工作經(jīng)歷這塊，就需要單獨(dú)做一個(gè)工作經(jīng)歷表，然后根據(jù)外鍵，建立他們之間的關(guān)系，這是數(shù)據(jù)庫(kù)方面的設(shè)計(jì)
? 下面就來(lái)看看如何在asp中實(shí)現(xiàn)這些
? 添加操作：
? 代碼：
<%
???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>愛(ài)好</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>
注意：在這里我們可以直接通過(guò)request("username")獲得username列的數(shù)組值，通過(guò)調(diào)試可以看到，第一個(gè)(索引為0)值為",",所以獲得值的時(shí)候我們要從索引為1開(kāi)始讀取，然后逐一添加操作即可
修改:
首先根據(jù)外鍵循環(huán)讀取數(shù)據(jù)到一個(gè)表格里，代碼：
?
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>愛(ài)好</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)在要添加的記錄行分開(kāi)操作，如果我們要?jiǎng)h除記錄行，或者修改記錄行可以這樣操作
首先刪除所以記錄，然后重新添加以前的記錄和現(xiàn)在的記錄，至于代碼和添加的思路是一樣的，只不過(guò)這里面分兩個(gè)添加來(lái)完成的具體的代碼，大家可以自己嘗試一下
下面在看看在asp.net中如何實(shí)現(xiàn)
如果使用asp.net自帶的控件封裝模式，很難實(shí)現(xiàn)，所以這里我們可以采用上面講到的asp的思想來(lái)完成
js和html都一樣，不一樣的是后臺(tái)的代碼：
比如說(shuō)添加吧
?
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++)
????????{
????????????//獲得傳遞過(guò)來(lái)的值，對(duì)其操作
????????????string?name?=?namelist[i].ToString();
????????????string?usersex?=?sexlist[i].ToString();
????????????string?userage?=?agelist[i].ToString();
????????????string?userlove?=?agelist[i].ToString();
????????????//對(duì)其操作，比如添加修改等
????????}
????????
????}
?
在這里我們使用Request["username"]來(lái)獲得值，頁(yè)面用的是html標(biāo)簽，不是服務(wù)器端的控件，不用使用.value或者Text來(lái)實(shí)現(xiàn),?這樣就可以用asp或者jsp的思想來(lái)處理了
??? 同樣修改和刪除的也可以使用asp或者jsp的思想來(lái)處理
??? 或者從提交到處理完全采用jsp和asp的思想，創(chuàng)建一個(gè)HttpHandler，把數(shù)據(jù)都提交到這里面處理，這樣也可以，不過(guò)第一種方法好些，這樣容易獲得值并處理，不需要轉(zhuǎn)換什么的
??? 具體的問(wèn)題具體對(duì)待，比如需要默認(rèn)就有一行，這個(gè)時(shí)候就需要在員工表里添加工作記錄的字段，這一行的記錄都添加到員工表里，然后編輯刪除的時(shí)候需要先編輯，然后進(jìn)行兩個(gè)添加等。
??? 大的思路就是這樣，有什么問(wèn)題，希望大家給予指正....
?
轉(zhuǎn)載于:https://www.cnblogs.com/shuang121/archive/2011/12/07/2279402.html
總結(jié)
以上是生活随笔為你收集整理的Asp.net(asp,jsp)+JavaScript动态实现添加数据行的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 大半个完整
- 下一篇： DAS、NAS、SAN区别