动态表到JSON

Question

每次用户添加新行以填充客户信息时，我都会有动态表。 点击提交按钮后，我需要JSON格式的数据。

HTML

<table class="table table-bordered table-hover" id="driver">
                <thead>
                    <tr>
                        <th class="text-center text-info">
                            #
                        </th>
                        <th class="text-center text-info">
                            first name
                        </th>
                        <th class="text-center text-info">
                            last name
                        </th>

                        <th class="text-center text-info">
                            mobile num
                        </th>
                        <th class="text-center text-info">
                            email id
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr id='addr0'>
                        <td>
                        1
                        </td>
                        <td>
                        <input type="text" name='firstname'  placeholder='first name' class="form-control"/>
                        </td>
                        <td>
                        <input type="text" name='lastname' placeholder='last name' class="form-control"/>
                        </td>
                        <td>
                        <input type="text" name='mobile' placeholder='mobile number' class="form-control"/>
                        </td>

                        <td>
                        <input type="text" name='email' placeholder='email' class="form-control"/>
                        </td>
                    </tr>
                    <tr id='addr1'></tr>
                </tbody>
            </table>

JSON数据必须在密钥和＆amp;价值对。任何人都可以建议我们如何做到这一点？

[
    {
        "first name": "ashok",
        "last name": "kumar",
        "mobile num": 45,
        "email id": "xyx@gmail.com"
    },
    {
        "first name": "arun",
        "last name": "kumar",
        "mobile num": 789,
        "email id": "kum@as.com"
    }
]

Answer 1

serializeArray（）将帮助您在形成对象数组后将其转换为json，您可以使用JSON.stringify

jQuery Source

  

描述：将一组表单元素编码为名称和数组   值。

<强>更新

DEMO

＆＃13;

＆＃13;

$("form").submit(function(event) {
  var newFormData = [];
  jQuery('#driver tr:not(:first)').each(function(i) {
    var tb = jQuery(this);
    var obj = {};
    tb.find('input').each(function() {
      obj[this.name] = this.value;
    });
    obj['row'] = i;
    newFormData.push(obj);
  });
  console.log(newFormData);
  document.getElementById('output').innerHTML = JSON.stringify(newFormData);
  event.preventDefault();
});

＆＃13;

pre {
  width: 100%;
  background-color: whitesmoke;
  white-space: pre-wrap;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <table class="table table-bordered table-hover" id="driver">
    <thead>
      <tr>
        <th class="text-center text-info">
          #
        </th>
        <th class="text-center text-info">
          first name
        </th>
        <th class="text-center text-info">
          last name
        </th>

        <th class="text-center text-info">
          mobile num
        </th>
        <th class="text-center text-info">
          email id
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          1
        </td>
        <td>
          <input type="text" name='firstname' placeholder='first name' class="form-control" />
        </td>
        <td>
          <input type="text" name='lastname' placeholder='last name' class="form-control" />
        </td>
        <td>
          <input type="text" name='mobile' placeholder='mobile number' class="form-control" />
        </td>

        <td>
          <input type="text" name='email' placeholder='email' class="form-control" />
        </td>
      </tr>
      <tr>
        <td>
          2
        </td>
        <td>
          <input type="text" name='firstname' placeholder='first name' class="form-control" />
        </td>
        <td>
          <input type="text" name='lastname' placeholder='last name' class="form-control" />
        </td>
        <td>
          <input type="text" name='mobile' placeholder='mobile number' class="form-control" />
        </td>

        <td>
          <input type="text" name='email' placeholder='email' class="form-control" />
        </td>
      </tr>
    </tbody>
  </table>
  <input type="submit" name="g" value="Submit">
  <pre id="output"></pre>
</form>

＆＃13;

＆＃13;

＆＃13;

由于您希望输入字段作为您的Key Name，并将其值作为Object内的值，因此下面的代码实际上是循环遍历每一行，并且内部循环遍历每一列并将其存储在名为Object的obj中，然后将其推送到Array中newFormData