利用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 相关文章推荐
解决自定义$(id)的方法与jquery选择器$冲突的问题
Jun 14 Javascript
javascript面向对象快速入门实例
Jan 13 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
Nov 01 Javascript
简述Matlab中size()函数的用法
Mar 20 Javascript
Bootstrap媒体对象学习使用
Mar 07 Javascript
基于angular6.0实现的一个组件懒加载功能示例
Apr 12 Javascript
JavaScript设计模式之建造者模式实例教程
Jul 02 Javascript
在vue中安装使用vux的教程详解
Sep 16 Javascript
mock.js实现模拟生成假数据功能示例
Jan 15 Javascript
Vue 3.0 前瞻Vue Function API新特性体验
Aug 12 Javascript
详解如何修改 node_modules 里的文件
May 22 Javascript
微信小程序换肤功能实现代码(思路详解)
Aug 25 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
超强分页类2.0发布,支持自定义风格,默认4种显示模式
2007/01/02 PHP
php数组对百万数据进行排除重复数据的实现代码
2010/06/08 PHP
php 获取百度的热词数据的代码
2012/02/18 PHP
php一个解析字符串排列数组的方法
2015/05/12 PHP
php简单图像创建入门实例
2015/06/10 PHP
PHP+JavaScript实现无刷新上传图片
2017/02/21 PHP
Thinkphp5结合layer弹窗定制操作结果页面
2017/07/07 PHP
javascript 用原型继承来实现对象系统
2010/03/22 Javascript
js动态改变select选择变更option的index值示例
2014/07/10 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
2016/03/30 Javascript
jQuery ajax方法传递中文时出现中文乱码的解决方法
2016/07/25 Javascript
日期时间范围选择插件:daterangepicker使用总结(必看篇)
2017/09/14 Javascript
vue的.vue文件是怎么run起来的(vue-loader)
2018/12/10 Javascript
Vue 中的受控与非受控组件的实现
2018/12/17 Javascript
微信小程序实现的一键连接wifi功能示例
2019/04/24 Javascript
vue中根据时间戳判断对应的时间(今天 昨天 前天)
2019/12/20 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
2020/04/27 Javascript
python中字符串类型json操作的注意事项
2017/05/02 Python
关于python列表增加元素的三种操作方法
2018/08/22 Python
django-rest-framework解析请求参数过程详解
2019/07/18 Python
python脚本执行CMD命令并返回结果的例子
2019/08/14 Python
python 瀑布线指标编写实例
2020/06/03 Python
浅析NumPy 切片和索引
2020/09/02 Python
详解html5 canvas常用api总结(二)--绘图API
2016/12/14 HTML / CSS
美国非常受欢迎的Spa品牌:Bliss必列斯
2018/04/10 全球购物
DJI美国:消费类无人机领域的领导者
2018/04/27 全球购物
竞聘医务工作人员的自我评价分享
2013/11/04 职场文书
《雨点》教学反思
2014/02/12 职场文书
保密协议书范本
2014/04/22 职场文书
校园文明标语
2014/06/13 职场文书
清洁工个人工作总结
2015/03/05 职场文书
导游词之四川武侯祠
2019/10/21 职场文书
Python机器学习之底层实现KNN
2021/06/20 Python
Vue鼠标滚轮滚动切换路由效果的实现方法
2021/08/04 Vue.js
MySQL令人大跌眼镜的隐式转换
2021/08/23 MySQL
WINDOWS下安装mysql 8.x 的方法图文教程
2022/04/19 MySQL