站长网_站长创业_站长主页_站长之家_易采站长站

会员投稿 投稿指南 站长资讯通告: ASP基础入门第五篇(ASP脚本循环语句)
搜索:
您的位置: 主页 > 教程 > 网页编程 > ASP编程 > » 正文

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

Tags:
最新图文资讯
1 2 3 4 5 6
相关文章列表:
易采站长站 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助 -
<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>