JS动态增加输入栏

最新推荐文章于 2022-11-11 19:13:40 发布

原创最新推荐文章于 2022-11-11 19:13:40 发布 · 1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#JS #js实现动态增加 #web动态增加输入框 #web #输入栏

Javascript 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一个使用HTML、JavaScript和jQuery构建的交互式网页应用，该应用允许用户通过点击按钮来动态添加表格列，并在提交时将所有输入数据转换为JSON格式。用户可以输入中文字段、英文字段和字段类型，应用会自动创建相应的表格结构并收集数据，最终以JSON形式展示。此应用旨在提供一种简单直观的方法来预览和准备数据结构。

<%--
  Created by IntelliJ IDEA.
  User: jason.zhan
  Date: 6/26/2014
  Time: 12:47 PM
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Monitor Home</title>
    <script type="text/javascript" src="../resource/jQuery/jquery-2.1.1.min.js"></script>
    <script type="text/javascript">
        var i = 0;
        var jsonData = "";
        var cnName = "cnName";
        var enName = "enName";
        var atType = "atType";
        $(document).ready(function(){
            $("#addCol").click(function(){
                cnName += i;
                enName += i;
                atType += i;
                var html =  '<tr>'+
                                '<td><input type="text" id="'+cnName+'"/></td>' +
                                '<td><input type="text" id="'+enName+'"/></td>' +
                                '<td><input type="text" id="'+atType+'"/></td>'+
                            '</tr>';
                i++;
                $('#tabs').find("tbody").append(html);
                /*reset id*/
                cnName = "cnName";
                enName = "enName";
                atType = "atType";
            });
            $("#submitTemplate").click(function(){
                //alert(document.getElementById(("cnName1")).value);
                if(i == 0 ) {
                    alert("Please add at least one column.");
                }else{
                    jsonData += "{" + "\"" + "template" + "\"" + ":["
                    for(var j = 0; j < i; j++) {
                        jsonData += ("{" +
                                "\"" + "cnName" + "\"" + ":" + "\"" + document.getElementById(("cnName" + j)).value + "\"," +
                                "\"" + "enName" + "\"" + ":" + "\"" + document.getElementById(("enName" + j)).value + "\"," +
                                "\"" + "atType" + "\"" + ":" + "\"" + document.getElementById(("atType" + j)).value + "\"" +
                                "}");
                        if(j != i - 1) {
                            jsonData += ",";
                        }
                    }
                    jsonData += "]}";
                }
                //alert(jsonData);
            });
        });
    </script>
</head>
<body>
    <input type="button" id="addCol" value="增加一列"/>
    <table id="tabs">
        <thead>
            <tr>
               <td>中文字段</td>
               <td>英文字段</td>
               <td>字段类型</td>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <input type="button" id="submitTemplate" value="提交模板"/>
</body>
</html>