将 HTML 表格的表单输入字段转换为 JSON

Question

我目前正在学习 javascript，作为练习，我正在尝试将 HTML 表单表转换为 JSON，通过通信接口将其发送并将其添加到另一个页面。

我目前能够通过使用以下代码运行表格来解析大多数字段的内容。

function tableToJson(table)
{
    var data = [];

    var headers = [];
    for(var i=0; i<table.rows[0].cells.length; i++)
    {
        headers[i] = table.rows[0].cells[i].innerHTML.toLowerCase();
    }

    for(var i=1; i<table.rows.length; i++)
    {
        var tableRow = table.rows[i];
        var rowData = {};

        for(var j=0; j<tableRow.cells.length; j++)
        {
            rowData[ headers[j] ] = tableRow.cells[j].innerHTML;
        }
        data.push(rowData);
    }

    return JSON.stringify(data);
}

var tables = document.getElementsByTagName("table");

if(tables.length > 0)
{
    var json = tableToJson(tables[0]);
    console.log(json);
    /* Send part bellow */
}

一旦它被转换，我也可以通过通信发送它，并从接收到的 JSON 重新实现它到一个新的弹出窗口。

我面临的问题是当某些字段是带有预填充值的输入标签时，如下所示。

<td style="width: 8%; vertical-align: middle; border-top: 1px solid rgba(56, 103, 214, 0.2);">
    <input type="number" step="0.01" name="form[18046][amount]" class="form-control">
</td>

该值不能直接用于单元格的 innerHTML，因此转换后的 JSON 数据包含 HTML 代码但不包含预填充值，因此当我在新弹出窗口上重新实现表格时，我有一个空的输入字段。

我希望能够从innerHTML 中获取预填充的值，这样我就可以摆脱输入标签而只保留该值。

也许最好的方法是通过 DOM 访问值form[18046][amount] ，但我找不到方法来做到这一点。

有人知道我如何获得输入预填充值而不是单元格的 innerHTML 吗？

Answer 1

我已经能够通过解析 innerHTML 字符串来检索“名称”属性值并向 DOM 询问关联值来获取预填充值。

var name = tableRow.cells[j].innerHTML.replace(/.*name="([^"]+)".*$/g, "$1");
rowData[headers[j]] = document.getElementsByName(name)[0].value;

我仍然对任何其他解决方案持开放态度，我觉得这根本不是最好的解决方案。