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

Question

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

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

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>

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

我希望能够从内部获取预填充值HTML，这样我就可以去掉输入标签，只保留该值。

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

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

Answer 1

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

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

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

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

Convert form input fields of an HTML table to JSON

html

javascript

forms

html-table

innerhtml