javascript - 使用 jQuery 将用户输入从 html 表转换为 JSON

Question

我能够将预先填充的数据表转换为 JSON对象与 jQuery.这是代码:

var header = $('table thead tr th').map(function () {
return $(this).text();
});

var tableObj = $('table tbody tr').map(function (i) {
    var row = {};
    $(this).find('td').each(function (i) {
        var rowName = header[i];
        row[rowName] = $(this).text();
    });
    return row;
}).get();

JSON.stringify(tableObj);

html表格是这样的:

<table>
        <thead>
        <tr>
            <th>Name</th>
            <th>E-mail</th>
            <th>Job</th>
        </tr>
        </thead>

        <tbody>
        <tr>
            <td>jason</td>
            <td>jason@example.com</td>
            <td>Developer</td>
        </tr>
        <tr>
            <td>ted</td>
            <td>ted@example.com</td>
            <td>Bear</td>
        </tr>
        </tbody>
</table>

现在我的任务是实际处理带有用户输入的空表。当用户加载页面时，表格是空的，没有任何值，用户输入内容并单击提交后，我想将用户输入的数据转换为JSON对象并将其传回后端。

我试图通过扭曲 table 来实现它进入form ，并添加<input>每个 <td> 中的标签，像这样:

<form>
    <table>
        <tbody>
            <tr>
                <td><input type="text"/></td>
                <td><input type="text"/></td>
                <td><input type="text"/></td>
            </tr>
            <tr>
                <td><input type="text"/></td>
                <td><input type="text"/></td>
                <td><input type="text"/></td>
            </tr>
        </tbody>
    </table>
    <button type="submit">Submit</button>
</form>

我尝试使用 .submit() jQuery 的方法使其工作，但我收到语法错误:

$('form').submit(
var header = $('table thead tr th').map(function () {
return $(this).text();
});

var tableObj = $('table tbody tr').map(function (i) {
    var row = {};
    $(this).find('td').each(function (i) {
        var rowName = header[i];
        row[rowName] = $(this).text();
    });
    return row;
}).get();

JSON.stringify(tableObj);
);

我应该如何更改代码才能使其正常工作？

Answer 1

发生这种情况是因为 td 中没有文本。您需要找到输入的值。

1) 您需要在td中获取输入

2) 您需要获取 value of the input

另请尝试查看 editable div

试试这个:

row[rowName] = $(this).find('input').val();