JavaScript动态生成控件的方法

最新推荐文章于 2023-04-20 13:04:16 发布

CrazZy651314

最新推荐文章于 2023-04-20 13:04:16 发布

阅读量3.3k

点赞数

分类专栏：日记 html+css 文章标签： js动态生成控件

本文链接：https://blog.csdn.net/qinqigang/article/details/52884756

版权

日记同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

html+css

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>