主頁(yè) > 知識(shí)庫(kù) > asp+jsp+JavaScript動(dòng)態(tài)實(shí)現(xiàn)添加數(shù)據(jù)行

asp+jsp+JavaScript動(dòng)態(tài)實(shí)現(xiàn)添加數(shù)據(jù)行

熱門標(biāo)簽:地圖標(biāo)注中心多少錢注冊(cè) 電銷機(jī)器人一個(gè)多少錢 不封卡外呼系統(tǒng)一般多少錢 北京大興區(qū)地圖標(biāo)注 濰坊呼叫中心外呼系統(tǒng)供應(yīng)商 地圖標(biāo)注不完整被罰款 微信地圖標(biāo)注有什么用 重慶外呼電銷系統(tǒng)費(fèi)用 鄭州語(yǔ)音電銷機(jī)器人官網(wǎng)

在應(yīng)用程序的開發(fā)中,有些輸入信息是動(dòng)態(tài)的,比如我們要注冊(cè)一個(gè)員工的工作經(jīng)歷,比如下圖

如果做成死的,只能填寫三個(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:

 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> 

在這里有點(diǎn)要注意:tr  style="display:none" id=trUserInfo> 主要是為了,添加數(shù)據(jù)的時(shí)候,文本框中的值都是空的,要不然添加的 新行都是有值的,這樣很不好,當(dāng)然了,為了防止讀取的是空值,在后面獲得數(shù)據(jù)組的時(shí)候,我們從索引1開始獲得值,這個(gè)在后面會(huì)講到

第二種方式:
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>

注意:和第一個(gè)基本類似,如果你希望默認(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)這些
添加操作:
代碼:

!--#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>

注意:在這里我們可以直接通過(guò)request("username")獲得username列的數(shù)組值,通過(guò)調(diào)試可以看到,第一個(gè)(索引為0)值為",",所以獲得值的時(shí)候我們要從索引為1開始讀取,然后逐一添加操作即可

修改:
首先根據(jù)外鍵循環(huán)讀取數(shù)據(jù)到一個(gè)表格里,代碼:

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)在要添加的記錄行分開操作,如果我們要?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ō)添加吧

 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è)添加等。
大體實(shí)現(xiàn)添加數(shù)據(jù)行的思路就是這樣,有什么問(wèn)題,希望大家給予指正....

您可能感興趣的文章:
  • JSP實(shí)現(xiàn)添加功能和分頁(yè)顯示實(shí)例分析
  • jsp中兩個(gè)框中內(nèi)容互換可以添加也可以移除
  • jsp連接MySQL操作GIS地圖數(shù)據(jù)實(shí)現(xiàn)添加point的功能代碼
  • JSP+Ajax 添加、刪除多選框
  • JSP使用JDBC完成動(dòng)態(tài)驗(yàn)證及采用MVC完成數(shù)據(jù)查詢的方法
  • jsp操作MySQL實(shí)現(xiàn)查詢/插入/刪除功能示例
  • 高效的jsp分頁(yè)查詢
  • JSP簡(jiǎn)單添加,查詢功能代碼

標(biāo)簽:汕頭 撫州 佛山 唐山 揭陽(yáng) 海南 攀枝花 鶴崗

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《asp+jsp+JavaScript動(dòng)態(tài)實(shí)現(xiàn)添加數(shù)據(jù)行》,本文關(guān)鍵詞  asp+jsp+JavaScript,動(dòng)態(tài),實(shí)現(xiàn),;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《asp+jsp+JavaScript動(dòng)態(tài)實(shí)現(xiàn)添加數(shù)據(jù)行》相關(guān)的同類信息!
  • 本頁(yè)收集關(guān)于asp+jsp+JavaScript動(dòng)態(tài)實(shí)現(xiàn)添加數(shù)據(jù)行的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章