利用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 相关文章推荐
window.open的功能全解析
Oct 10 Javascript
复制js对象方法(详解)
Jul 08 Javascript
JavaScript实现相册弹窗功能(zepto.js)
Jun 21 Javascript
Highcharts学习之坐标轴
Aug 02 Javascript
Bootstrap Table使用方法解析
Oct 19 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
Oct 10 Javascript
搭建基于express框架运行环境的方法步骤
Nov 15 Javascript
防止Layui form表单重复提交的实现方法
Sep 10 Javascript
Vue使用NProgress进度条的方法
Sep 21 Javascript
js脚本中执行java后台代码方法解析
Oct 11 Javascript
JavaScript实现PC端四格密码输入框功能
Feb 19 Javascript
js实现页面图片消除效果
Mar 24 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网站在线人数统计
2008/04/09 PHP
php5新改动之短标记启用方法
2008/09/11 PHP
php中关于普通表单多文件上传的处理方法
2011/03/25 PHP
微信公众号开发客服接口实例代码
2016/10/21 PHP
关于PHP内置的字符串处理函数详解
2017/02/04 PHP
在Mac OS下搭建LNMP开发环境的步骤详解
2017/03/10 PHP
javascript 不间断的图片滚动并可点击
2010/01/15 Javascript
再谈querySelector和querySelectorAll的区别与联系
2012/04/20 Javascript
常见的jQuery选择器汇总
2014/11/24 Javascript
基于jQuery实现下拉框
2014/11/24 Javascript
JavaScript数组合并的多种方法
2016/05/22 Javascript
关于JS中二维数组的声明方法
2016/09/24 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
2017/01/09 Javascript
html5 canvas 详细使用教程
2017/01/20 Javascript
JavaScript 用fetch 实现异步下载文件功能
2017/07/21 Javascript
详解小程序rich-text对富文本支持方案
2018/11/28 Javascript
详解vue中v-on事件监听指令的基本用法
2020/07/22 Javascript
[05:34]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY第二弹
2014/06/25 DOTA
对pandas进行数据预处理的实例讲解
2018/04/20 Python
Python实现的文本对比报告生成工具示例
2018/05/22 Python
在python中,使用scatter绘制散点图的实例
2019/07/03 Python
Python中关于logging模块的学习笔记
2020/06/03 Python
Python定时任务APScheduler安装及使用解析
2020/08/07 Python
html5 svg 中元素点击事件添加方法
2013/01/16 HTML / CSS
HTML5触摸事件演化tap事件介绍
2016/03/25 HTML / CSS
应届毕业生求职信范例分享
2013/12/17 职场文书
工程索赔意向书
2014/08/30 职场文书
2015年七夕爱情寄语
2015/03/24 职场文书
2015年读书月活动总结
2015/03/26 职场文书
西安事变观后感
2015/06/12 职场文书
庆祝教师节主持词
2015/07/06 职场文书
公司老总年会致辞
2015/07/30 职场文书
MySQL 重写查询语句的三种策略
2021/05/10 MySQL
使用canvas仿Echarts实现金字塔图的实例代码
2021/11/11 HTML / CSS
python神经网络ResNet50模型
2022/05/06 Python
使用 DataAnt 监控 Apache APISIX的原理解析
2022/07/07 Servers