javascript
asp.net(asp,jsp) javascript动态实现添加数据行 -凯发k8官方网
在应用程序的开发中，有些输入信息是动态的，比如我们要注册一个员工的工作经历，比如下图
如果做成死的，只能填写三个，如果是四个呢？或者更多呢，那不是添加不上去了吗，所以这样固然不好，我们可以用动态添加表格行实现，如下图，添加一行，输入一行信息，这样比较灵活
下面我们就来看看如何在asp和asp.net中结合javascript来实现这种效果：
首先，动态添加表格是要在前台实现的，当然后台也可以，不过可能要用到ajax，很麻烦，所以最好采用javascript来实现，下面来介绍动态添加表格行的两种方式：
第一种：源码
javascript:
view code
/**//*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.deleterow(i targpos);
}
}
}
html
view code <table id=tabuserinfo border=1 width="720">
<tr>
<td>姓名td>
<td>性别td>
<td>年龄td>
<td>爱好td>
<td>deletetd>
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>
在这里有点要注意：
第二种方式：
javascript
view code
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);
}
html
view code <table border="1">
<tr>
<td>aaaatd>
<td>bbbbtd>
<td>cccctd>
<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
%>
姓名
性别
年龄
爱好
delete
注意：在这里我们可以直接通过request("username")获得username列的数组值，通过调试可以看到，第一个(索引为0)值为",",所以获得值的时候我们要从索引为1开始读取，然后逐一添加操作即可
修改:
首先根据外键循环读取数据到一个表格里，代码：
view code
姓名
性别
年龄
爱好
delete
<%
set rs=server.createobject("adodb.recordset")
strsql="select * from tb_person"
rs.open strsql,conn,2,3
do while not rs.eof
%>
<%
rs.movenext
loop
%>
我的思路是把以前添加的记录和现在要添加的记录行分开操作，如果我们要删除记录行，或者修改记录行可以这样操作
首先删除所以记录，然后重新添加以前的记录和现在的记录，至于代码和添加的思路是一样的，只不过这里面分两个添加来完成的具体的代码，大家可以自己尝试一下
下面在看看在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
总结
以上是凯发k8官方网为你收集整理的asp.net(asp,jsp) javascript动态实现添加数据行的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： 大半个完整
- 下一篇： das、nas、san区别