利用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/vbs/vbscript加密的编码异处理小结
Jun 25 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
Nov 28 Javascript
点击显示指定元素隐藏其他同辈元素的方法
Feb 19 Javascript
基于jQuery实现收缩展开功能
Mar 18 Javascript
JS中常用的输出方式(五种)
Jun 12 Javascript
JavaScript字符集编码与解码详谈
Feb 02 Javascript
求js数组的最大值和最小值的四种方法
Mar 03 Javascript
Angular.js中处理页面闪烁的方法详解
Mar 09 Javascript
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
Oct 24 Javascript
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
Dec 09 Javascript
利用Promise自定义一个GET请求的函数示例代码
Mar 20 Javascript
JavaScript 替换所有匹配内容及正则替换方法
Feb 12 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
IIS+fastcgi下PHP运行超时问题的解决办法详解
2013/06/20 PHP
php数据库操作model类(使用__call方法)
2016/11/16 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
用javascript实现无刷新更新数据的详细步骤 asp
2006/12/26 Javascript
js资料prototype 属性
2007/03/13 Javascript
jQuery 学习第七课 扩展jQuery的功能 插件开发
2010/05/17 Javascript
jQuery 在光标定位的地方插入文字的插件
2012/05/10 Javascript
javascript设计模式 接口介绍
2012/07/24 Javascript
jQuery去掉字符串起始和结尾的空格(多种方法实现)
2013/04/01 Javascript
js获取当前日期时间及其它操作汇总
2015/04/17 Javascript
javascript封装的sqlite操作类实例
2015/07/17 Javascript
轻松搞定jQuery.noConflict()
2016/02/15 Javascript
Web前端框架Angular4.0.0 正式版发布
2017/03/28 Javascript
搭建基于express框架运行环境的方法步骤
2018/11/15 Javascript
使用FormData实现上传多个文件
2018/12/04 Javascript
小程序显示弹窗时禁止下层的内容滚动实现方法
2019/03/20 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
2020/04/01 jQuery
精读《Vue3.0 Function API》
2020/05/20 Javascript
Vue自定义render统一项目组弹框功能
2020/06/07 Javascript
Vue使用预渲染代替SSR的方法
2020/07/02 Javascript
详解Python中的join()函数的用法
2015/04/07 Python
Python3实现从指定路径查找文件的方法
2015/05/22 Python
Python-嵌套列表list的全面解析
2016/06/08 Python
python 队列基本定义与使用方法【初始化、赋值、判断等】
2019/10/24 Python
python集合删除多种方法详解
2020/02/10 Python
python中把元组转换为namedtuple方法
2020/12/09 Python
利用Python如何画一颗心、小人发射爱心
2021/02/21 Python
浏览器实现移动端高性能css3动画(开启gpu加速)
2013/12/23 HTML / CSS
中国最大隐形眼镜网上商城:视客眼镜网
2016/10/30 全球购物
全球性的在线时尚男装零售商:boohooMAN
2016/12/17 全球购物
个人工作表现评语
2014/04/30 职场文书
2015年银行客户经理工作总结
2015/04/01 职场文书
会议通知格式范文
2015/04/15 职场文书
党员公开承诺书(2016最新版)
2016/03/24 职场文书
Go获取两个时区的时间差
2022/04/20 Golang
分享几个实用的CSS代码块
2022/06/10 HTML / CSS