动态 table 到 JSON

Question

我有动态 table 每次用户都会添加一个新行来填写客户信息。点击提交按钮后，我需要 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 数据必须在键值对中。谁能建议我们如何做到这一点？

[
    {
        "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

Description: Encode a set of form elements as an array of names and values.

已更新

DEMO

$("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();
});

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

<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>

由于您希望输入字段作为您的键名并将其值作为对象内的值，因此下面的代码实际上循环遍历每一行并在其中循环遍历每一列并将其存储在名为 Object 的 obj 中，然后将其推送进入数组 newFormData

动态 table 到 JSON

Dynamic table to JSON

javascript

post

json

html-table

dynamic

HTML