利用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 相关文章推荐
简明json介绍
Sep 28 Javascript
Javascript 面试题随笔
Mar 31 Javascript
获取内联和链接中的样式(js代码)
Apr 11 Javascript
JQuery解析HTML、JSON和XML实例详解
Mar 29 Javascript
js实现文本上下来回滚动
Feb 03 Javascript
浅谈Vue.js
Mar 02 Javascript
JavaScript实现省市县三级级联特效
May 16 Javascript
JavaScript判断输入是否为数字类型的方法总结
Sep 28 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
Dec 06 Javascript
ES6中let 和 const 的新特性
Sep 03 Javascript
对angularJs中自定义指令replace的属性详解
Oct 09 Javascript
微信小程序间使用navigator跳转传值问题实例分析
Mar 27 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数组添加元素方法小结
2014/12/20 PHP
PHP上传图片类显示缩略图功能
2016/06/30 PHP
php操纵mysqli数据库的实现方法
2016/09/18 PHP
php实现当前页面点击下载文件的简单方法
2016/09/22 PHP
PHP面向对象自动加载机制原理与用法分析
2016/10/14 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
tp5(thinkPHP5)操作mongoDB数据库的方法
2018/01/20 PHP
ThinkPHP实现的rsa非对称加密类示例
2018/05/29 PHP
用javascript实现给出的盒子的序列是否可连为一矩型
2007/08/30 Javascript
div模拟选择框示例代码
2013/11/03 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
2014/04/11 Javascript
JQuery中ajax方法访问web服务实例
2015/07/18 Javascript
jQuery实现淡入淡出的模态框
2017/02/09 Javascript
Express+Nodejs 下的登录拦截实现代码
2017/07/01 NodeJs
在vue里使用codemirror遇到的问题
2018/11/01 Javascript
前端Vue项目详解--初始化及导航栏
2019/06/24 Javascript
vue中datepicker的使用教程实例代码详解
2019/07/08 Javascript
vant自定义二级菜单操作
2020/11/02 Javascript
python使用wxPython打开并播放wav文件的方法
2015/04/24 Python
深入了解Python数据类型之列表
2016/06/24 Python
python中利用await关键字如何等待Future对象完成详解
2017/09/07 Python
Python批量合并有合并单元格的Excel文件详解
2018/04/05 Python
python实现对指定输入的字符串逆序输出的6种方法
2018/04/26 Python
pandas.dataframe中根据条件获取元素所在的位置方法(索引)
2018/06/07 Python
python opencv实现旋转矩形框裁减功能
2018/07/25 Python
python解析多层json操作示例
2019/12/30 Python
HTML5中微数据概述及在搜索引擎中的使用举例
2013/02/07 HTML / CSS
三星美国官网:Samsung美国
2017/02/06 全球购物
IWOOT美国:新奇的小玩意
2018/04/27 全球购物
毕业生幼师求职自荐信
2013/10/01 职场文书
具结保证书
2015/01/17 职场文书
公司表扬信格式
2015/05/04 职场文书
乡镇团委工作总结2015
2015/05/26 职场文书
uwsgi+nginx代理Django无法访问静态资源的解决
2021/05/10 Servers
Jackson 反序列化时实现大小写不敏感设置
2021/06/29 Java/Android
为什么MySQL分页用limit会越来越慢
2021/07/25 MySQL