程式師世界 >> 編程語言 >> 網頁編程 >> ASP編程 >> 關於ASP編程 >> asp+jsp+JavaScript動態實現添加數據行

asp+jsp+JavaScript動態實現添加數據行

編輯：關於ASP編程

在應用程序的開發中，有些輸入信息是動態的，比如我們要注冊一個員工的工作經歷，比如下圖

如果做成死的，只能填寫三個，如果是四個呢？或者更多呢，那不是添加不上去了嗎，所以這樣固然不好，我們可以用動態添加表格行實現，如下圖，添加一行，輸入一行信息，這樣比較靈活

下面我們就來看看如何在asp和asp.net中結合javascript來實現這種效果：
首先，動態添加表格是要在前台實現的，當然後台也可以，不過可能要用到ajax，很麻煩，所以最好采用javascript來實現，下面來介紹動態添加表格行的兩種方式：
第一種：源碼
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; i<tabObj.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> 主要是為了，添加數據的時候，文本框中的值都是空的，要不然添加的新行都是有值的，這樣很不好，當然了，為了防止讀取的是空值，在後面獲得數據組的時候，我們從索引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>

注意：和第一個基本類似，如果你希望默認的情況下就有一行，那麼可以靜態的添加一行

下面，就來看看如何通過後台完成對其操作，比如對新增行的修改，刪除，添加等
首先說一下數據庫的問題
對於這些需要動態添加的表格行的記錄，我們需要重新放到放到一個表裡，就是單獨做一個表，比如上面說到的工作經歷的問題當然了，員工要有一個員工表，記錄姓名，年齡，身份證，學歷等信息，對於工作經歷這塊，就需要單獨做一個工作經歷表，然後根據外鍵，建立他們之間的關系，這是數據庫方面的設計
下面就來看看如何在asp中實現這些
添加操作：
代碼：

<!--#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列的數組值，通過調試可以看到，第一個(索引為0)值為",",所以獲得值的時候我們要從索引為1開始讀取，然後逐一添加操作即可

修改:
首先根據外鍵循環讀取數據到一個表格裡，代碼：

<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都一樣，不一樣的是後台的代碼：
比如說添加吧

 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，把數據都提交到這裡面處理，這樣也可以，不過第一種方法好些，這樣容易獲得值並處理，不需要轉換什麼的。

具體的問題具體對待，比如需要默認就有一行，這個時候就需要在員工表裡添加工作記錄的字段，這一行的記錄都添加到員工表裡，然後編輯刪除的時候需要先編輯，然後進行兩個添加等。
大體實現添加數據行的思路就是這樣，有什麼問題，希望大家給予指正....