利用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 相关文章推荐
关于firefox的ElementTraversal 接口 使用说明
Nov 11 Javascript
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
Jul 08 Javascript
JS实现倒计时和文字滚动的效果实例
Oct 29 Javascript
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
Sep 15 Javascript
angularjs学习笔记之完整的项目结构
Sep 26 Javascript
Spring MVC中Ajax实现二级联动的简单实例
Jul 06 Javascript
将form表单通过ajax实现无刷新提交的简单实例
Oct 12 Javascript
如何使用Vuex+Vue.js构建单页应用
Oct 27 Javascript
jQuery日程管理插件fullcalendar使用详解
Jan 07 Javascript
JavaScript中清空数组的三种方式
Mar 22 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
Aug 30 Javascript
如何基于viewport vm适配移动端页面
Nov 13 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缓存技术的多种方法小结
2012/08/14 PHP
PHP获取二维数组中某一列的值集合
2015/12/25 PHP
PHP AjaxForm提交图片上传并显示图片源码
2016/11/29 PHP
yii2安装详细流程
2018/05/23 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
关于二级域名下使用一级域名下的COOKIE的问题
2011/11/07 Javascript
js数组操作学习总结
2013/11/04 Javascript
js call方法详细介绍(js 的继承)
2013/11/18 Javascript
js闭包实例汇总
2014/11/09 Javascript
JavaScript与ActionScript3两者的同性与差异性
2016/09/22 Javascript
关于json字符串与实体之间的严格验证代码
2016/11/10 Javascript
简单理解vue中实例属性vm.$els
2016/12/01 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
2016/12/17 Javascript
jQuery选择器实例应用
2017/01/05 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
2020/08/27 Javascript
vue一步步实现alert功能
2017/07/05 Javascript
vue bus全局事件中心简单Demo详解
2018/02/26 Javascript
浅析js中mvvm模式实现的原理
2018/10/06 Javascript
简述vue路由打开一个新的窗口的方法
2018/11/29 Javascript
基于Koa(nodejs框架)对json文件进行增删改查的示例代码
2019/02/02 NodeJs
详解微信小程序-canvas绘制文字实现自动换行
2019/04/26 Javascript
微信小程序自定义弹出层效果
2020/05/26 Javascript
Python创建日历实例
2014/08/21 Python
python利用sklearn包编写决策树源代码
2017/12/21 Python
简单了解python PEP的一些知识
2019/07/13 Python
使用Pandas将inf, nan转化成特定的值
2019/12/19 Python
如何在 Django 模板中输出 &quot;{{&quot;
2020/01/24 Python
如何使用 Python 读取文件和照片的创建日期
2020/09/05 Python
python读取excel数据绘制简单曲线图的完整步骤记录
2020/10/30 Python
CSS3 Flexbox中flex-shrink属性的用法示例介绍
2013/12/30 HTML / CSS
英国最大的线上保健品零售商之一:Vitamin Planet
2016/12/01 全球购物
幼儿园美术教学反思
2014/01/31 职场文书
设备收款委托书范本
2014/10/02 职场文书
珍爱生命主题班会
2015/08/13 职场文书
我收到了德劲DE1107
2022/04/05 无线电
SpringCloud超详细讲解Feign声明式服务调用
2022/06/21 Java/Android