利用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 相关文章推荐
远离JS灾难css灾难之 js私有函数和css选择器作为容器
Dec 11 Javascript
js确定对象类型方法
Mar 30 Javascript
基于jQuery的图片左右无缝滚动插件
May 23 Javascript
JQuery操作单选按钮以及复选按钮示例
Sep 23 Javascript
js去除输入框中所有的空格和禁止输入空格的方法
Jun 09 Javascript
js判断鼠标左、中、右键哪个被点击的方法
Jan 27 Javascript
jquery实现叠层3D文字特效代码分享
Aug 21 Javascript
JS简单编号生成器实现方法(附demo源码下载)
Apr 05 Javascript
js基础之DOM中document对象的常用属性方法详解
Oct 28 Javascript
微信小程序实战之自定义抽屉菜单(7)
Apr 18 Javascript
vue 运用mock数据的示例代码
Nov 07 Javascript
Vue响应式原理深入解析及注意事项
Dec 11 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
实现树状结构的两种方法
2006/10/09 PHP
PHP中soap的用法实例
2014/10/24 PHP
thinkphp模板继承实例简述
2014/11/26 PHP
thinkphp实现分页显示功能
2016/12/03 PHP
PHP数据库操作二:memcache用法分析
2017/08/16 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
一个很简单的办法实现TD的加亮效果.
2006/06/29 Javascript
jquery 事件对象属性小结
2010/04/27 Javascript
拖动布局之保存布局页面cookies篇
2010/10/29 Javascript
jQuery 对Select的操作备忘记录
2011/07/04 Javascript
Javascript高级技巧分享
2014/02/25 Javascript
JQuery+CSS实现图片上放置按钮的方法
2015/05/29 Javascript
深入理解关于javascript中apply()和call()方法的区别
2016/04/12 Javascript
Highcharts 多个Y轴动态刷新数据的实现代码
2016/05/28 Javascript
浅谈js函数的多种定义方法与区别
2016/11/29 Javascript
基于JS实现bookstore静态页面的实例代码
2017/02/22 Javascript
vue中created和mounted的区别浅析
2019/08/13 Javascript
基于vue实现图片验证码倒计时60s功能
2019/12/10 Javascript
使用Vue Composition API写出清晰、可扩展的表单实现
2020/06/10 Javascript
js 执行上下文和作用域的相关总结
2021/02/08 Javascript
python中pycurl库的用法实例
2014/09/30 Python
详解 Python 读写XML文件的实例
2017/08/02 Python
Django中间件实现拦截器的方法
2018/06/01 Python
python随机数分布random测试
2018/08/27 Python
对Python 除法负数取商的取整方式详解
2018/12/12 Python
学python安装的软件总结
2019/10/12 Python
python框架django项目部署相关知识详解
2019/11/04 Python
解决Tensorflow 使用时cpu编译不支持警告的问题
2020/02/03 Python
python如何将两张图片生成为全景图片
2020/03/05 Python
python实现代码审查自动回复消息
2021/02/01 Python
学校总务处领导干部个人对照检查材料思想汇报
2014/10/06 职场文书
工作汇报开头与结尾怎么写
2014/11/08 职场文书
2015毕业生实习工作总结
2014/12/12 职场文书
开会通知
2015/04/20 职场文书
高考满分作文赏析(2篇)
2019/08/12 职场文书
Nginx反向代理学习实例教程
2021/10/24 Servers