利用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 相关文章推荐
jQuery 复合选择器应用的几个例子
Sep 11 Javascript
一个不错的js html页面倒计时可精确到秒
Oct 22 Javascript
分享20个提升网站界面体验的jQuery插件
Dec 15 Javascript
JavaScript通过join函数连接数组里所有元素的方法
Mar 20 Javascript
深入剖析JavaScript编程中的对象概念
Oct 21 Javascript
3种js实现string的substring方法
Nov 09 Javascript
uploadify多文件上传参数设置技巧
Nov 16 Javascript
javaScript嗅探执行神器-sniffer.js
Feb 14 Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
Mar 02 Javascript
微信小程序实现星星评价效果
Nov 02 Javascript
vue实现全匹配搜索列表内容
Sep 26 Javascript
vue 实现超长文本截取,悬浮框提示
Jul 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
PHP 事务处理数据实现代码
2010/05/13 PHP
PHP 面向对象详解
2012/09/13 PHP
php数组相加 array(“a”)+array(“b”)结果还是array(“a”)
2012/09/19 PHP
深入for,while,foreach遍历时间比较的详解
2013/06/08 PHP
php中in_array函数用法分析
2014/11/15 PHP
php数组添加与删除单元的常用函数实例分析
2015/02/16 PHP
JavaScript 指导方针
2007/04/05 Javascript
eval与window.eval的差别分析
2011/03/17 Javascript
Javascript的时间戳和php的时间戳转换注意事项
2013/04/12 Javascript
用javascript对一个json数组深度赋值示例
2014/07/27 Javascript
jquery实现的判断倒计时是否结束代码
2016/02/05 Javascript
JS中微信小程序自定义底部弹出框
2016/12/22 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
2017/04/19 Javascript
浅谈Fetch 数据交互方式
2018/12/20 Javascript
微信小程序登录数据解密及状态维持实例详解
2019/05/06 Javascript
JS判断数组里是否有重复元素的方法小结
2019/05/21 Javascript
vue里的data要用return返回的原因浅析
2019/05/28 Javascript
element-ui如何防止重复提交的方法步骤
2019/12/09 Javascript
Python自动连接ssh的方法
2015/03/07 Python
python实现BP神经网络回归预测模型
2019/08/09 Python
python使用pygame实现笑脸乒乓球弹珠球游戏
2019/11/25 Python
tensorflow使用range_input_producer多线程读取数据实例
2020/01/20 Python
Python猫眼电影最近上映的电影票房信息
2020/09/18 Python
python中pickle模块浅析
2020/12/29 Python
日语专业推荐信
2013/11/12 职场文书
2014老师三严三实对照检查材料思想汇报
2014/09/18 职场文书
政风行风评议个人心得体会
2014/10/29 职场文书
三好学生评语大全
2014/12/29 职场文书
大明湖导游词
2015/02/03 职场文书
行政前台岗位职责
2015/04/16 职场文书
感恩的心主题班会
2015/08/12 职场文书
《实心球》教学反思
2016/02/23 职场文书
范文之农村基层党建工作报告
2019/10/24 职场文书
Python趣味挑战之教你用pygame画进度条
2021/05/31 Python
MYSQL 运算符总结
2021/11/11 MySQL
Python的property属性详细讲解
2022/04/11 Python