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

Posted 2023-05-07

【中文标题】将 HTML 表格的表单输入字段转换为 JSON

【英文标题】：Convert form input fields of an HTML table to JSON

【发布时间】：2021-02-27 01:56:12

【问题描述】：

我目前正在学习 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 吗？

【参考方案1】：

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

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

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