JavaScript动态生成控件的方法

日记 同时被 2 个专栏收录
23 篇文章 0 订阅
9 篇文章 0 订阅

JavaScript动态生成控件的方法
这个是在项目里面遇到的问题,这个是一个Test,不过还是没有找到从页面映射数据到后台的方法,boss给出的方法是用json来传递数据,不过我还是不是很懂。下面是动态生成控件的代码。

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/common.jsp" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
    <title>动态生成控件</title>
<script>
    var i=1;
    function add()
        {
            var top = document.getElementById("top");//获取id=top的元素
            var div = document.createElement("div");//创建div,名称为div
            var div1 = document.createElement("div");//创建div,名称为div1
            var input = document.createElement("input");//创建input,名称为input
            var input1 = document.createElement("input");//创建input,名称为input1
            var del = document.createElement("input");//创建input,名称为del
            div.innerHTML="商品id" + i + " "; //设置名称为div,的提示显示
            div.id = i;  //id  的设置
            div1.innerHTML="商品" + i + "数量"; //提示
            div1.id = i; //id设置

            input.type = "text";  //属性的设置
            input.name = "withPromotionsCommodityForm.commodityId";
            input.value = "";
            input.id = "v" + i;
            input1.type = "text";
            input1.name = "withPromotionsCommodityForm.number";//["+i+"]"
            input1.value = "";
            input1.id = "v1" + i;
            del.type = "button";
            del.name = "d";
            del.value = "删除";
            del.id = 'd' + i;
        del.onclick = function remo()
        {
            alert("删除商品:" + input.value);
            top.removeChild(div);
            top.removeChild(div1);
            top.removeChild(del);
            i = i - 1;
        };
            i = i + 1;
            div.appendChild(input);   
            //div.appendChild(del); 
            div1.appendChild(input1);   
            top.appendChild(div);
            top.appendChild(div1);
            top.appendChild(del);    
    }
function MakeForm() 
{ 
  // 创建一个 form 
  var form1 = document.createElement("form"); 
  form1.id = "form"; 
  form1.name = "form"; 
  // 添加到 body 中 
  document.body.appendChild(form); 
  // 创建一个输入 
  var input = document.createElement("input"); 
  // 设置相应参数 
  input.type = "text"; 
  input.name = "value1"; 
  input.value = "1234567"; 
  // 将该输入框插入到 form 中 
  form1.appendChild(input); 
  // form 的提交方式 
  form1.method = "POST"; 
  // form 提交路径 
  form1.action = "/servlet/info"; 
  // 对该 form 执行提交 
  form1.submit(); 
  // 删除该 form 
  document.body.removeChild(form1); 
} 
</script>
</head>
    <body>
        <div>
            <input type="button" onclick="add()" value="添加商品" />
            <!-- <input type="button" onclick="MakeForm()" value="form" /> -->
        </div>
        <form action="">
            <div id="top">
                <input type="submit"  value="保存" />
            </div>
        </form>
    </body>
</html>
  • 0
    点赞
  • 1
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值