利用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 相关文章推荐
Mootools 1.2教程 选项卡效果(Tabs)
Sep 15 Javascript
javascript 操作select下拉列表框的一点小经验
Mar 20 Javascript
基于jQuery的简单的列表导航菜单
Mar 02 Javascript
仅IE支持clearAttributes/mergeAttributes方法使用介绍
May 04 Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
Nov 14 Javascript
ECMAScript 6即将带给我们新的数组操作方法前瞻
Jan 06 Javascript
js实现浏览本地文件并显示扩展名的方法
Aug 17 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
Oct 29 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
Apr 07 Javascript
vue2.0 循环遍历加载不同图片的方法
Mar 06 Javascript
详解jquery和vue对比
Apr 16 jQuery
JS eval代码快速解密实例解析
Apr 23 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 和 MySQL 基础教程(四)
2006/10/09 PHP
php socket方式提交的post详解
2008/07/19 PHP
php csv操作类代码
2009/12/14 PHP
php中使用parse_url()对网址进行解析的实现代码(parse_url详解)
2012/01/03 PHP
PHP异常Parse error: syntax error, unexpected T_VAR错误解决方法
2014/05/06 PHP
PHP源码分析之变量的存储过程分解
2014/07/03 PHP
PHP whois查询类定义与用法示例
2019/04/03 PHP
jQuery Tools tab(幻灯片)
2012/07/14 Javascript
window resize和scroll事件的基本优化思路
2014/04/29 Javascript
JavaScript用JQuery呼叫Server端方法示例代码
2014/09/03 Javascript
javascript实现表单验证
2016/01/29 Javascript
详解Vue如何支持JSX语法
2017/11/10 Javascript
vue-cli系列之vue-cli-service整体架构浅析
2019/01/14 Javascript
Vue使用zTree插件封装树组件操作示例
2019/04/25 Javascript
微信小程序如何获取群聊的openGid以及名称详解
2019/07/17 Javascript
从零开始用webpack构建一个vue3.0项目工程的实现
2020/09/24 Javascript
[02:50]【扭转乾坤,只此一招】DOTA2全新版本永雾林渊开启新篇章
2020/12/24 DOTA
python 七种邮件内容发送方法实例
2014/04/22 Python
Python3 queue队列模块详细介绍
2018/01/05 Python
Python中多个数组行合并及列合并的方法总结
2018/04/12 Python
python opencv 图像拼接的实现方法
2019/06/27 Python
纯CSS3实现鼠标悬停提示气泡效果
2014/02/28 HTML / CSS
基于HTML5 Canvas 实现弹出框效果
2017/06/05 HTML / CSS
非洲NO.1网上商店:Jumia肯尼亚
2016/08/18 全球购物
澳大利亚百货商店中销量第一的商务衬衫品牌:Van Heusen
2018/07/26 全球购物
Servlet方面面试题
2016/09/28 面试题
建筑自我鉴定
2013/10/19 职场文书
大学生志愿者感言
2014/01/15 职场文书
元旦晚会感言
2014/03/12 职场文书
幼儿园中班上学期评语
2014/04/18 职场文书
工地宣传标语
2014/06/18 职场文书
党员自我剖析材料范文
2014/10/06 职场文书
给朋友的道歉短信
2015/05/12 职场文书
士兵突击观后感
2015/06/16 职场文书
图书借阅制度范本
2015/08/06 职场文书
好段摘抄大全(48句)
2019/08/08 职场文书