關於使用JavaScript構建複雜表單的建議/ jquery

Question

我目前正在創建一個網站，其中包含的字段類型不盡相同，我想知道其他人如何保持「構造函數」代碼降到最低並且可重用。

下面是我的一些當前的代碼示例：

function editForm() { 

    function saveButton() { 
    return $('<tr/>') 
     .append(
     $('<th/>') 
    ) 
     .append(
     $('<td/>') 
      .append(
      $('<input/>') 
       .addClass("new-button") 
       .addClass("submit-button") 
       .attr("type", "button") 
       .attr("value", "Save") 
     ) 
      .append(" or ") 
      .append(
      $('<a/>') 
       .attr("href", "#") 
       .text("Cancel") 
     ) 
    ); 
    }; 

    this.section = function() { 
    return $('<form/>') 
     .attr("action", "#") 
     .attr("method", "GET") 
     .append(
     $('<table/>') 
      .append(
      $('<tbody/>') 
       .append(
       $('<tr/>') 
        .append(
        $('<th/>') 
         .append(
         $('<label/>') 
          .attr("for", "title") 
          .text("Title") 
        ) 
       ) 
        .append(
        $('<td/>') 
         .append(
         $('<input/>') 
          .addClass("title") 
          .addClass("text") 
          .attr("name", "title") 
          .attr("value", title) 
          .attr("type", "text") 
          .attr("required", "true") 
        ) 
       ) 
      ) 
       .append(
       saveButton() 
      ) 
     ) 
    ); 
    }; 

    this.menuItem = function() { 
    return $('<form/>') 
     .attr("action", "#") 
     .attr("method", "GET") 
     .append(
     $('<table/>') 
      .append(
      $('<tbody/>') 
       .append(
       $('<tr/>') 
        .append(
        $('<th/>') 
         .append(
         $('<label/>') 
          .attr("for", "name") 
          .text("Item Name") 
        ) 
       ) 
        .append(
        $('<td/>') 
         .append(
         $('<input/>') 
          .addClass("name") 
          .addClass("text") 
          .attr("name", "name") 
          .attr("value", menu_item.name) 
          .attr("type", "text") 
          .attr("required", "true") 
        ) 
       ) 
      ) 
       .append(
       $('<tr/>') 
        .append(
        $('<th/>') 
         .append(
         $('<label/>') 
          .attr("for", "price") 
          .text("Price") 
        ) 
       ) 
        .append(
        $('<td/>') 
         .append(
         $('<input/>') 
          .addClass("price") 
          .addClass("text") 
          .attr("name", "price") 
          .attr("value", menu_item.price) 
          .attr("type", "text") 
          .attr("required", "true") 
        ) 
       ) 
      ) 
       .append(
       $('<tr/>') 
        .append(
        $('<th/>') 
         .append(
         $('<label/>') 
          .attr("for", "description") 
          .text("Description") 
        ) 
       ) 
        .append(
        $('<td/>') 
         .append(
         $('<textarea/>') 
          .addClass("description") 
          .addClass("text") 
          .attr("name", "description") 
          .attr("required", "false") 
          .attr("rows", "2") 
          .attr("cols", "50") 
          .text(menu_item.description) 
        ) 
       ) 
      ) 
       .append(
       saveButton() 
      ) 
     ) 
    ); 
    }; 
    return this; 
}; 

這裏有更多的一些信息是什麼，我現在在做什麼，我想要實現：

的形式在我的網站是我使用表格佈局佈局的唯一對象，所以我可以將表單標籤與輸入字段對齊。根據我的理解，標籤和字段之間的溝槽是讓用戶更容易使用表單的最佳方式。我願意提供關於如何以其他方式實現相同效果的建議，特別是如果可能的話，不要使用表格。

我的JavaScript當前使用JQuery選擇器創建這些元素，然後使用像.append()這樣的javascript函數將它們鏈接在一起。

因爲我建設有一個表格佈局形式，這意味着有大量的重複的代碼創建基本排結構：

<tr> 
    <th> 
    <label for="fieldname">Field</label> 
    </th> 
    <td> 
    <input name="fieldname" type="text"> 
    </td> 
</tr> 

由於這種方法，你可以看到很多的在我上面的代碼中重複，直覺上我認爲我應該能夠消除並可能使一個表單生成器，我可以使用整個網站。

在我上面的代碼，我重複很多元素，比如，，，，，等

我想什麼，能夠做的是創造一個更爲簡潔的格式的形式，像這樣：

menu_item = { 
    name:   "", 
    price:  "", 
    description: "" 
} 

createForm() 
    .addField(menu_item.name, "Nome", "text-input", required) 
    .addField(menu_item.price, "Preço", "text-input", required) 
    .addField(menu_item.description, "Descrição", "textarea") 
    .addField("Salvar item", "submit-button"); 

或更好，但像這樣：

createForm() 
    .addField({ 
    value:  menu_item.name, 
    label_text: "Nome", 
    input_type: "text-input", 
    required: true }) 
    .addField({ 
    value:  menu_item.price, 
    label_text: "Preço", 
    input_type: "text-input", 
    required: true }) 
    .addField({ 
    value:  menu_item.description, 
    label_text: "Descrição", 
    input_type: "textarea" }) 
    .addField({ 
    value:  "Salvar item", 
    input_type: "submit-button" }); 

其中激活addField函數的格式，你可以命名字段中，定義顯示給用戶的標籤（最初將是葡萄牙，但瓦特e希望在將來能夠使用多種語言）以及該輸入元素的輸入元素和選項的類型，例如required =「true」或placeholder =「即。穀物，華夫餅乾，烤麪包等「

任何人有任何建議他們如何解決這個問題或任何生產就緒的JQuery插件（即目前維護的插件，而不是簡單的實驗或放棄軟件）我應該尋求幫助？我有這種事情

Answer 1

我與trimpath成功合作[1]，一個JavaScript模板引擎應該讓你有

[1] http://code.google.com/p/trimpath/wiki/JavaScriptTemplates

編輯：一些額外的信息：這是保持，非常快，並確定最低限度，你可以用膠水包裹它。

另一個編輯：爲更多的JavaScript的模板庫，看看這裏：

HTML Templates in Javascript? Without coding in the page?