帝王谷资源网

asp+jsp+JavaScript动态实现添加数据行
网络编程 2024/12/25 佚名
3 2
帝王谷资源网 Design By www.wdxyy.com

在应用程序的开发中，有些输入信息是动态的，比如我们要注册一个员工的工作经历，比如下图

asp+jsp+JavaScript动态实现添加数据行

如果做成死的，只能填写三个，如果是四个呢？或者更多呢，那不是添加不上去了吗，所以这样固然不好，我们可以用动态添加表格行实现，如下图，添加一行，输入一行信息，这样比较灵活

asp+jsp+JavaScript动态实现添加数据行

下面我们就来看看如何在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="/UploadFiles/2021-04-02/myjs.js">


注意：在这里我们可以直接通过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，把数据都提交到这里面处理，这样也可以，不过第一种方法好些，这样容易获得值并处理，不需要转换什么的。


具体的问题具体对待，比如需要默认就有一行，这个时候就需要在员工表里添加工作记录的字段，这一行的记录都添加到员工表里，然后编辑删除的时候需要先编辑，然后进行两个添加等。

大体实现添加数据行的思路就是这样，有什么问题，希望大家给予指正....
标签：
asp.net+JavaScript动态实现添加数据行,asp.net动态实现添加数据行
帝王谷资源网 Design By www.wdxyy.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
帝王谷资源网 Design By www.wdxyy.com
www.wdxyy.com 帝王谷资源网
139,976互联网资源
144,792高清电影
21,817无损音乐
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接