Question

我有一个带有输入表的表单，我需要将其正确地转换为每行json数组。例如：

Id    Name     Gender
1     John     Male
2     Rose     Female

Desired output:
[
  { Id:1, Name: "John", Gender: "Male" },
  { Id:2, Name: "Rose", Gender: "Female" }
]

请帮帮我。我用这个代码

JSON.stringify($('#myform').serializeArray());

但它给了我这个输出：

[
  {\"name\":\"Id\",\"value\":\"1\"},
  {\"name\":\"Name\",\"value\":\"John\"},
  {\"name\":\"Gender\",\"value\":\"Male\"}
]

查看实际操作：https://jsfiddle.net/srssnzj8/2/

Answer 1

要执行您的操作，您可以使用map()在每个input中创建select和tr元素值的数组。试试这个：

$(document).on('click', '#save', function(event) {
    event.preventDefault();
    var data = $('tr').map(function() {
    	var obj = {};
    	$(this).find('input, select').each(function() {
        	obj[this.name] = $(this).val();
        });
        return obj;
    }).get();
    
    console.log(JSON.stringify(data));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form method="post" action="#" id="myForm">
    <table>
        <tr>
            <td>
                <span>1</span>
                <input type="hidden" name="Id" value="1" />
            </td>
            <td>
                <input type="text" name="Name" value="John" />
            </td>
            <td>
                <select class="form-control" name="Gender">
                    <option value="Male" selected>Male</option>
                    <option value="Female">Female</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                <span>2</span>
                <input type="hidden" name="Id" value="2" />
            </td>
            <td>
                <input type="text" name="Name" value="Rose" />
            </td>
            <td>
                <select class="form-control" name="Gender">
                    <option value="Male">Male</option>
                    <option value="Female" selected>Female</option>
                </select>
            </td>
        </tr>
    </table>
    <button type="submit" id="save">
        Submit
    </button>
</form>

Answer 2

基本上你必须

使用$("tbody tr").each(...遍历所有行
使用$(this).find("td");获取所有行的单元格
使用$cells.each(...遍历所有单元格并$(this).find("input").val()获取文本。
将它们存储在一个数组中，然后只需为其调用JSON.stringify

同时更改了html，添加thead，tbody和th，查看更新的jsFiddle

Answer 3

您必须遍历每个表行，并对行地图名称上的每个输入重复值

function getFormData(){
  var rowData = [];
  $("tr").each(function() {
    var unindexed_array= jQuery(this).find("input, select").serializeArray();
    var obj= {};
    jQuery(unindexed_array).each(function(){
       obj[this.name] = this.value;
    });
     rowData .push(obj);
});    
   return rowData ;
}

将表格数据表格化为JSON字符串

3 个答案: