0

好的，我需要帮助才能正确编写 jquery 代码和 php

这个想法

我希望用户在单击“添加表”按钮后生成多个表，在每个表中，用户可以在单击“添加属性”按钮后生成属性

我想使用 Json 和 jquery.post() 将此表单作为多维数组或嵌套对象发送，然后 php 代码可以访问每个字段

图片： http ://s11.postimg.org/4haqtm8tf/image.jpg

HTML

<form id="step_2"> <b>Type name of the table:</b> 
  <input type="button" value="Add table" class="add" id="add_t" class="space" />
  <br/>
  <input type="hidden" id="db" name='db_name' value="<?php echo $db; ?>" />
  <!----------------->
  <div id="table_wrap">
    <fieldset id="table1">
      <legend>Table:</legend>
      <input type="text" class="tablename" id="table_name" name="table_name" />
      <input type="button" value="Add attribute" class="add space" id="add" />
      <br/>
      <div class="fieldwrapper" id="field1">
        <b>Attribute</b>
        <input type="text" class="fieldname" id="att" name="att" />
        <select class="fieldtype" id="type" name="type">
          <option value="num">Number</option>
          <option value="text">Text</option>
          <option value="dt">Date/Time</option>
        </select>
      </div>
    </fieldset>
  </div>
  <!--------------------->
  <input type="button" id="back_2" value="Back" />
  <input type="button" id="save_2" value="Save" />
  <input type="button" id="next_2" value="Next" />
</form>
4

1 回答 1

0

我认为 JSON 数据可以是这样的：

  [
     {
        "table_name":"table1",
        "attributes":[
           {
              "attr_name":"id",
              "type":"integer"
           },
           {
              "attr_name":"name",
              "type":"string"
           }
        ]
     },
     {
        "table_name":"table2",
        "attributes":[
           {
              "attr_name":"id",
              "type":"integer"
           },
           {
              "attr_name":"category_id",
              "type":"integer"
           }
        ]
     }
  ]

使用 jQuery，您可以轻松生成此数据结构。这是我的建议代码，我没有测试过，但想法就是这样；）

function saveTableData() {
  var tables = [];

  $("#table_wrap fieldset").each(function(index, fieldset){
    // Contains the whole table data
    var table_data = {};
    table_data['table_name'] = $(fieldset).find("#table_name").val();

    // Contains the attributes data
    var attributes = [];

    // To loop all attributes fields
    $(fieldset).find(".fieldwrapper").each(function(idx, attr){
      var attr = {};
      attr['attr_name'] = $(attr).find("#att").val();
      attr['type'] = $(attr).find("#type").val();

      // Add to the attributes collection.
      attributes.push(attr);
    });

    // Then attach attributes to the table data object.
    table_data['attributes'] = attributes;

    // Finally add the table data to final result collection.
    tables.push(table_data);
  });

  // Do something more with result ...
  $.post("/save", {"tables": tables}, function(response) {
    // ...
  })
}

然后在您的服务器端代码中，您只需要处理参数“tables”（其中 value 是一个数组），然后遍历它以执行更多操作。

希望它有帮助:)

于 2013-04-08T04:22:02.780 回答