利用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 相关文章推荐
基于dom编程中 动态创建与删除元素的使用
Apr 17 Javascript
jQuery获得内容和属性方法及示例
Dec 02 Javascript
元素未显示设置width/height时IE中使用currentStyle获取为auto
May 04 Javascript
jQuery实现DIV层收缩展开的方法
Feb 27 Javascript
javascript数组去重的六种方法汇总
Aug 16 Javascript
jQuery点击其他地方时菜单消失的实现方法
Apr 22 Javascript
获取input标签的所有属性的方法
Jun 28 Javascript
深入理解bootstrap框架之入门准备
Oct 09 Javascript
10分钟掌握XML、JSON及其解析
Dec 06 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
Jul 09 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
Nov 07 Javascript
浅谈node.js中间件有哪些类型
Apr 29 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
中东人咖啡哲学
2021/03/03 咖啡文化
JavaScript获取客户端计算机硬件及系统等信息的方法
2014/01/02 Javascript
2种jQuery 实现刮刮卡效果
2015/02/01 Javascript
jQuery实现判断滚动条到底部
2015/06/23 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
2015/09/22 Javascript
温习Javascript基础语法之词法结构
2016/05/31 Javascript
AngularJS入门教程之多视图切换用法示例
2016/11/02 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
2016/12/02 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
2018/01/25 jQuery
vue项目中api接口管理总结
2018/04/20 Javascript
Vue中的Props(不可变状态)
2018/09/29 Javascript
vue多页面项目中路由使用history模式的方法
2019/09/23 Javascript
js实现计时器秒表功能
2019/12/16 Javascript
JS原型和原型链原理与用法实例详解
2020/02/05 Javascript
JavaScript实现捕获鼠标坐标
2020/04/12 Javascript
[01:38:19]夜魇凡尔赛茶话会 第五期
2021/03/11 DOTA
python控制台显示时钟的示例
2014/02/24 Python
Python中pygame安装方法图文详解
2015/11/11 Python
python 采集中文乱码问题的完美解决方法
2016/09/27 Python
利用Python找出序列中出现最多的元素示例代码
2017/12/08 Python
pandas数据预处理之dataframe的groupby操作方法
2018/04/13 Python
解决python-docx打包之后找不到default.docx的问题
2020/02/13 Python
Python 读取有公式cell的结果内容实例方法
2020/02/17 Python
python程序如何进行保存
2020/07/03 Python
python 读取串口数据的示例
2020/11/09 Python
HTML5中判断用户是否正在浏览页面的方法
2014/05/03 HTML / CSS
购买中国最好的电子产品:Geekbuying
2018/03/13 全球购物
巴西最大的在线约会网站:ParPerfeito
2018/07/11 全球购物
英国景点门票网站:attractiontix
2019/08/27 全球购物
成人高等教育毕业生自我鉴定
2013/10/22 职场文书
计算机系毕业生推荐信
2013/11/06 职场文书
公司营业员的自我评价
2014/03/04 职场文书
关于读书的演讲稿600字
2014/08/27 职场文书
劳模先进事迹材料
2014/12/24 职场文书
高一作文之暖冬
2019/11/09 职场文书
Redis实战之Lettuce的使用技巧详解
2022/12/24 Redis