利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)


Posted in Javascript onNovember 25, 2013

一共两个页面,分别如下:

一.创建页面create.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<title>
</title>
<head>
</head>
<body >
 <form id="form1" action="request.jsp">
<script language="javascript" type="text/javascript">
var count=0 ;
function additem(id)
{
  var row,cell,str;
  row = document.getElementByIdx_x(id).insertRow();
  if(row != null )
  {
cell = row.insertCell();
cell.innerHTML="<input id=\"St"+count+"\" type=\"text\" name=\"St"+count+"\" value= \"St"+count+"\"><input type=\"button\" value=\"删除\" onclick=\'deleteitem(this);\'>";
count ++;
  }
}
function deleteitem(obj)
{
  var curRow = obj.parentNode.parentNode;
  tb.deleteRow(curRow.rowIndex);
}
function getsub()
{
var re="";
for (var  i = 0 ;i<count;i++)
{
re += document.getElementsByName("St"+i)[0].value;
}
document.getElementByIdx_x("Hidden1").value=re;
}

</script><table id="tb"></table>
<input name="button" type="button" onclick='additem("tb")' value="添加>>"/><input type="submit" name="submit" onclick="getsub()" value="提交"/>
    <input id="Hidden1" name="Hidden1" type="hidden" value="" />
    </form>
</body>
</html>

二.接收数据页面 request.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
  <head>
    <title>测试</title>
  </head>
  <%
   String data= request.getParameter("Hidden1");
   out.println("取得的数据为:"+data);
   %>
  <body>
  </body>
</html>
Javascript 相关文章推荐
用YUI做了个标签浏览效果
Feb 20 Javascript
很多人都是用下面的js刷新站IP和PV
Sep 05 Javascript
javascript 原型模式实现OOP的再研究
Apr 09 Javascript
Javascript 日期对象Date扩展方法
May 30 Javascript
javascript下利用arguments实现string.format函数
Aug 24 Javascript
javascript中定义类的方法汇总
Dec 28 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
Mar 23 Javascript
微信小程序之小豆瓣图书实例
Nov 30 Javascript
使用snowfall.jquery.js实现爱心满屏飞的效果
Jan 05 Javascript
Vue开发实现吸顶效果的示例代码
Aug 21 Javascript
angularJs使用ng-repeat遍历后选中某一个的方法
Sep 30 Javascript
vue实现节点增删改功能
Sep 26 Javascript
js导入导出excel(实例代码)
Nov 25 #Javascript
用javascript添加控件自定义属性解析
Nov 25 #Javascript
JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)
Nov 25 #Javascript
几种设置表单元素中文本输入框不可编辑的方法总结
Nov 25 #Javascript
js动态添加删除,后台取数据(示例代码)
Nov 25 #Javascript
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
Nov 25 #Javascript
jQuery中获取checkbox选中项等操作及注意事项
Nov 24 #Javascript
You might like
PHP+FastCGI+Nginx配置PHP运行环境
2014/08/07 PHP
php禁止直接从浏览器输入地址访问.php文件的方法
2014/11/04 PHP
使用PHP连接多种数据库的实现代码(mysql,access,sqlserver,Oracle)
2016/12/21 PHP
JS 对象介绍
2010/01/20 Javascript
jquery 图片Silhouette Fadeins渐显效果
2010/02/07 Javascript
jquery用get实现ajax在ie里面刷新不进入后台解决方法
2013/08/12 Javascript
JS中引用百度地图并将百度地图的logo和信息去掉
2013/09/29 Javascript
JavaScript实现找出数组中最长的连续数字序列
2014/09/03 Javascript
jQuery实现弹出窗口中切换登录与注册表单
2015/06/05 Javascript
javascript对象的创建和访问
2016/03/08 Javascript
非常漂亮的相册集 使用jquery制作相册集
2016/04/28 Javascript
BootStrap3学习笔记(一)之网格系统
2016/05/20 Javascript
JS针对Array的各种操作汇总
2016/11/29 Javascript
js原生之焦点图转换加定时器实例
2016/12/12 Javascript
微信小程序实战之自定义抽屉菜单(7)
2017/04/18 Javascript
老生常谈ES6中的类
2017/07/31 Javascript
ubuntu编译nodejs所需的软件并安装
2017/09/12 NodeJs
JavaScript复制内容到剪贴板的两种常用方法
2018/02/27 Javascript
详解vue中组件参数
2018/07/09 Javascript
Vue前后端不同端口的实现方法
2018/09/19 Javascript
[00:32]2018DOTA2亚洲邀请赛EG出场
2018/04/03 DOTA
python的类变量和成员变量用法实例教程
2014/08/25 Python
Python中pip更新和三方插件安装说明
2018/07/08 Python
opencv3/python 鼠标响应操作详解
2019/12/11 Python
Python 格式化输出_String Formatting_控制小数点位数的实例详解
2020/02/04 Python
Win10用vscode打开anaconda环境中的python出错问题的解决
2020/05/25 Python
python实现PDF中表格转化为Excel的方法
2020/06/16 Python
Python实现自动整理文件的脚本
2020/12/17 Python
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
2016/08/25 HTML / CSS
巴西美妆购物网站:Kutiz Beauté
2019/03/13 全球购物
学生保证书范文
2014/04/28 职场文书
驻村工作先进事迹
2014/08/14 职场文书
党员干部观看《周恩来四个昼夜》思想汇报
2014/09/10 职场文书
办公室务虚会发言材料
2014/10/20 职场文书
职工培训工作总结
2015/08/10 职场文书
win10安装配置nginx的过程
2021/03/31 Servers