利用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 相关文章推荐
NiftyCube——轻松实现圆角边框
Feb 20 Javascript
javascript 解决表单仍然提交即使监听处理函数返回false
Mar 14 Javascript
七个很有意思的PHP函数
May 12 Javascript
js获取字符串字节数方法小结
Jun 09 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
Aug 27 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
Dec 08 Javascript
JS针对Array的各种操作汇总
Nov 29 Javascript
深入理解javascript中concat方法
Dec 12 Javascript
Bootstrap fileinput组件封装及使用详解
Mar 10 Javascript
Js和VUE实现跑马灯效果
May 25 Javascript
Openlayers实现距离面积测量
Sep 28 Javascript
React forwardRef的使用方法及注意点
Jun 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中获取内网用户MAC地址(WINDOWS/linux)的实现代码
2011/08/11 PHP
phpmyadmin config.inc.php配置示例
2013/08/27 PHP
PHP中实现生成静态文件的方法缓解服务器压力
2014/01/07 PHP
跟我学Laravel之路由
2014/10/15 PHP
用javascript自动显示最后更新时间
2007/03/15 Javascript
HTML中事件触发列表与解说
2007/07/09 Javascript
extjs 04_grid 单击事件新发现
2012/11/27 Javascript
jquery动态加载select下拉框示例代码
2013/12/10 Javascript
jquery对元素拖动排序示例
2014/01/16 Javascript
jquery超简单实现手风琴效果的方法
2015/06/05 Javascript
js数组常用操作方法小结(增加,删除,合并,分割等)
2016/08/02 Javascript
浅谈jQuery为哪般去掉了浏览器检测
2016/08/29 Javascript
彻底学会Angular.js中的transclusion
2017/03/12 Javascript
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
2018/08/31 Javascript
vue的style绑定background-image的方式和其他变量数据的区别详解
2018/09/03 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
2018/11/16 Javascript
JavaScript链式调用实例浅析
2018/12/19 Javascript
Angular7创建项目、组件、服务以及服务的使用
2019/02/19 Javascript
JS实现的字符串数组去重功能小结
2019/06/17 Javascript
ES6新增的数组知识实例小结
2020/05/23 Javascript
返回上一个url并刷新界面的js代码
2020/09/12 Javascript
Python中的defaultdict与__missing__()使用介绍
2018/02/03 Python
获取python的list中含有重复值的index方法
2018/06/27 Python
Python读取英文文件并记录每个单词出现次数后降序输出示例
2018/06/28 Python
Django 限制用户访问频率的中间件的实现
2018/08/23 Python
Django如何开发简单的查询接口详解
2019/05/17 Python
Python如何在单元测试中给对象打补丁
2020/08/03 Python
分享unittest单元测试框架中几种常用的用例加载方法
2020/12/02 Python
使用html5 canvas创建太空游戏的示例
2014/05/08 HTML / CSS
New Balance天猫官方旗舰店:始于1906年,百年慢跑品牌
2017/11/15 全球购物
小学美术教学反思
2014/02/01 职场文书
解除劳动合同协议书范本
2014/09/13 职场文书
六查六看剖析材料
2014/10/06 职场文书
幼儿园万圣节活动总结
2015/05/05 职场文书
小学运动会加油词
2015/07/18 职场文书
Python合并多张图片成PDF
2021/06/09 Python