admin管理员组

文章数量:1585963

表单属性有姓名、性别、爱好、地址、自我介绍。

<body>
    <form id="form"></form>
    <script>
        var elements = [
            {
                tag: 'input',
                text: '姓名',
                attr: { type: 'text', name: 'user' },
                option: null
            },
            {
                tag: 'input',
                text: '性别',
                attr: { type: 'radio', name: 'gender' },
                option: { m: '男', w: '女' }
            },
            {
                tag: 'input',
                text: '爱好',
                attr: { type: 'checkbox', name: 'hobby[]' },
                option: { swimming: '游泳', reading: '读书', running: '跑步' }
            },
            {
                tag: 'select',
                text: '住址',
                attr: { name: 'area' },
                option: { '': '--请选择--', bj: '北京', sh: '上海' }
            },
            {
                tag: 'textarea',
                text: '自我介绍',
                attr: { name: 'introduce', rows: '5', clos: '50' },
                option: null
            },
            {
                tag: 'input',
                text: '',
                attr: { type: 'submit', value: '提交' },
                option: null
            }
        ];
        function FormBuidder(data) {
            this.data = data;
            // return this.data;
        }
        FormBuidder.prototype.create = function () {
            var html = '';
            for (var k in this.data) {
                var item = { tag: ' ', text: ' ', attr: {}, option: {} };
                for (var n in this.data[k]) {
                    item[n] = this.data[k][n];
                }
                html += builder.toHTML(item);
                //  console.log(item);
            }
            // console.log(html)
            return '<table>' + html + '</table>';
        }
        var builder = {
            toHTML: function (obj) {
                // console.log(obj.attr);
                var html = this.item[obj.tag](this.attr(obj.attr), obj.option)
                return '<tr><th>' + obj.text + '</th><td>' + html + '</td></tr>';
            },
            attr: function (attr) {
                var html = '';
                for (var k in attr) {
                    html += k + '="' + attr[k] + '"';
                }
                return html;
            },
            item: {
                input: function (attr, option) {
                    // console.log(attr);
                    var html = '';
                    if (option === null) {
                        html += '<input ' + attr + '>'
                    } else {
                        for (var k in option) {
                            html += '<lable><input ' + attr + 'value = "' + k + '"' + '>';
                            html += option[k] + ' </lable>';
                        }
                    }
                    return html;
                },
                select: function (attr, option) {
                    var html = '';
                    for (var k in option) {
                        html += '<option value="' + k + '">' + option[k] + '</option>';
                    }
                    return '<select ' + attr + '>' + html + '</select>';
                },
                textarea: function (attr) {
                    return '<textarea ' + attr + '></textarea>';
                }
            }
        };
        var fn = new FormBuidder(elements);
        var html = fn.create();
        document.getElementById('form').innerHTML = html;
    </script>

</body>

运行效果：

 

 

本文标签： 生成器表单JavaScript

版权声明：本文标题：JavaScript:表单生成器 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dongtai/1727972922a1140382.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。