利用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 相关文章推荐
Textarea与懒惰渲染实现代码
Jan 04 Javascript
使用jQuery动态加载js脚本文件的方法
Apr 03 Javascript
jquery实现的一个文章自定义分段显示功能
May 23 Javascript
jQuery中end()方法用法实例
Jan 08 Javascript
使用javascript实现雪花飘落的效果
Jan 13 Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
Nov 24 Javascript
浅谈js中startsWith 函数不能在任何浏览器兼容的问题
Mar 01 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
May 09 Javascript
jquery实现图片轮播器
May 23 jQuery
基于JavaScript 实现拖放功能
Sep 12 Javascript
解决vue+webpack项目接口跨域出现的问题
Aug 10 Javascript
vue使用require.context实现动态注册路由
Dec 25 Vue.js
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 3行代码的分页算法(求起始页和结束页)
2009/10/21 PHP
php中smarty模板条件判断用法实例
2015/06/11 PHP
php扩展开发入门demo示例
2019/09/23 PHP
jQuery Validation插件remote验证方式的Bug解决
2010/07/01 Javascript
JS动态调用方法名示例介绍
2013/12/18 Javascript
jQuery中ajax和post处理json的不同示例对比
2014/11/02 Javascript
jquery简单倒计时实现方法
2015/12/18 Javascript
Node.js开发者必须了解的4个JS要点
2016/02/21 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
2017/03/29 Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
2017/08/17 Javascript
Angular2 http jsonp的实例详解
2017/08/31 Javascript
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
2017/09/21 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
2018/07/03 Javascript
记React connect的几种写法(小结)
2018/09/18 Javascript
vue element中axios下载文件(后端Python)
2019/05/10 Javascript
利用不到200行代码写一款属于你自己的js类库
2019/07/08 Javascript
原生JS实现留言板功能
2020/02/08 Javascript
javascript全局自定义鼠标右键菜单
2020/12/08 Javascript
Python字符串处理实现单词反转
2017/06/14 Python
pandas获取groupby分组里最大值所在的行方法
2018/04/20 Python
Python应用领域和就业形势分析总结
2019/05/14 Python
详解Python中的正斜杠与反斜杠
2019/08/09 Python
Python中import导入不同目录的模块方法详解
2020/02/18 Python
Python 创建TCP服务器的方法
2020/07/28 Python
挪威户外活动服装和装备购物网站:Bergfreunde挪威
2016/10/20 全球购物
瑞士男士时尚网上商店:Babista
2020/05/14 全球购物
班组长工作职责
2013/12/25 职场文书
中队活动总结
2014/08/27 职场文书
大学同学聚会感言
2015/07/30 职场文书
2015年挂职锻炼个人总结
2015/10/22 职场文书
2016教师校本培训心得体会
2016/01/08 职场文书
优秀新员工事迹材料
2019/05/13 职场文书
公文格式,规则明细(新手收藏)
2019/07/23 职场文书
默认网关不可用修复后过一会又不好使了解决方法
2022/04/08 数码科技
Elasticsearch 数据类型及管理
2022/04/19 Python
Python使用pandas导入xlsx格式的excel文件内容操作代码
2022/12/24 Python