利用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的逻辑运算符 ||
May 31 Javascript
javascript采用数组实现tab菜单切换效果
Dec 12 Javascript
深入document.write()与HTML4.01的非成对标签的详解
May 08 Javascript
jQuery图片滚动图片的效果(另类实现)
Jun 02 Javascript
jQuery中innerHeight()方法用法实例
Jan 19 Javascript
jquery比较简洁的软键盘特效实现方法
Mar 19 Javascript
纯javascript制作日历控件
Jul 17 Javascript
JS实现页面进入和返回定位到具体位置
Dec 08 Javascript
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法
Feb 19 Javascript
Node 使用express-http-proxy 做api网关的实现
Oct 15 Javascript
原生JS中应该禁止出现的写法
May 05 Javascript
jQuery实现广告显示和隐藏动画
Jul 04 jQuery
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
完美解决thinkphp验证码出错无法显示的方法
2014/12/09 PHP
PHP多线程之内部多线程实例分析
2015/03/09 PHP
JavaScript DOM学习第六章 表单实例
2010/02/19 Javascript
jquery创建一个新的节点对象(自定义结构/内容)的好方法
2013/01/21 Javascript
js获取客户端外网ip的简单实例
2013/11/21 Javascript
js监听鼠标事件控制textarea输入字符串的个数
2014/09/29 Javascript
深入探寻javascript定时器
2015/01/02 Javascript
js检测iframe是否加载完成的方法
2015/11/26 Javascript
JavaScript使用DeviceOne开发实战(二) 生成调试安装包
2015/12/01 Javascript
jQuery简单获取键盘事件的方法
2016/01/22 Javascript
Js动态设置rem来实现移动端字体的自适应代码
2016/10/14 Javascript
vue2.0+webpack环境的构造过程
2016/11/08 Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
2017/01/09 Javascript
jQuery实现字体颜色渐变效果的方法
2017/03/29 jQuery
浅谈vue2 单页面如何设置网页title
2017/11/08 Javascript
详解nuxt sass全局变量(公共scss解决方案)
2018/06/27 Javascript
微信小程序滑动选择器的实现代码
2018/08/10 Javascript
详解一个基于react+webpack的多页面应用配置
2019/01/21 Javascript
jquery实现选项卡切换代码实例
2019/05/14 jQuery
Vue实现图书管理小案例
2020/12/03 Vue.js
vue.js watch经常失效的场景与解决方案
2021/01/07 Vue.js
Python基于Tkinter实现的记事本实例
2015/06/17 Python
Pandas 对Dataframe结构排序的实现方法
2018/04/10 Python
为何人工智能(AI)首选Python?读完这篇文章你就知道了(推荐)
2019/04/06 Python
Python弹出输入框并获取输入值的实例
2019/06/18 Python
PYQT5实现控制台显示功能的方法
2019/06/25 Python
Python对Excel按列值筛选并拆分表格到多个文件的代码
2019/11/05 Python
Python 保存加载mat格式文件的示例代码
2020/08/04 Python
项目投资合作意向书
2014/07/29 职场文书
优秀家长自荐材料
2014/08/26 职场文书
廉政承诺书
2015/01/19 职场文书
三峡大坝导游词
2015/01/31 职场文书
党员个人年度总结
2015/02/14 职场文书
新学期开学标语2015
2015/07/16 职场文书
初中运动会前导词
2015/07/20 职场文书
导游词之包公祠
2019/11/25 职场文书