使用 Javascript 生成 HTML 表单答案

【问题标题】：Generating HTML Forms With Javascript使用 Javascript 生成 HTML 表单
【发布时间】：2009-10-31 09:12:02
【问题描述】：

我的应用程序使用 javascript 为我的网站生成所有 HTML。 index.html 基本上只包含

<div id="menu"></div><div id="content/><div id="content2/>

并且 javascript 替换了 div。当我需要创建表单时，我发现自己做了很多重复性的任务。

var html = "<form id="form1"> ... </form>";

是否有一个很好的框架来生成 HTML 表单，以便您可以执行类似的操作

generateForm(<formId>, [{name: "field1", type: button}, {name: "field2", type: input}]);

或者类似的东西？

【问题讨论】：

所以当我禁用 javascript 时，我会从您的网站获得一个空白页面。好想法。顺便说一句，谷歌也将什么也看不到
这是一个内部应用程序。它纯粹是一个 java 应用程序的界面，不用重新加载也很好。

标签： javascript forms

【解决方案1】：

您可以使用 MooTools、jQuery 等框架来简化生成过程...

要生成一个表单，你会得到这样的东西（在 MooTools 中）：

var form = new Element('form', { 'id' : 'myFormId', 'class' : 'myFormClass', ... });
var btn = new Element('input', { 'type' : 'button' , ... })
form.inject(btn);

您可以将此逻辑封装在一些方法中以集中代码生成

【讨论】：

你会如何在 jQuery 中做到这一点？
var form = $('
').attr('id', 'formId').attr('class', 'formClass'); var btn = $('').attr('type', 'button'); form.append(btn);希望能帮助到你。肿块。

【解决方案2】：

我编写了一个项目，我使用 javascript 创建了表 tr 和 td：

objTR = document.createElement("TR");
objTR.setAttribute("id", "factor_row_" + id);

objTD = document.createElement("TD");
objDIV = document.createElement("DIV");

objDIV.setAttribute("id", "title_" + id);
objDIV.innerHTML = 标题；
objTD.appendChild(objDIV);
objTR.appendChild(objTD);

我认为 appendChild 会为你工作。您必须只创建表单元素及其属性，然后将其附加到它的父级。希望对你有帮助;)

【讨论】：

【解决方案3】：

你也可以试试PURE这样的模板引擎
定义 HTML，然后根据 JSON 数据呈现它们。

【讨论】：