如何导出HTML表格数据并保留数据标识符，使其与原始数组格式完全一致？

我明白你的问题了——你现在点击dataToArray按钮导出的是单纯的二维值列表，没法和原始data数组的对象结构（包含property和value键）对应上对吧？别担心，只需要调整一下按钮的点击事件逻辑，就能导出和原始格式完全一致的对象数组了。

修改后的关键代码 #

我们只需要修改点击事件里的数组构建逻辑，从创建值数组改成创建匹配原始结构的对象：

//get table data
var dataToArray = document.getElementById("dataToArray")
dataToArray.addEventListener("click", function() {
    console.clear()
    console.log("data before export:")
    console.log(data)
    var exportData = []
    $("table#myTable tr").each(function() {
        var actualData = $(this).find("td");
        if (actualData.length > 0) {
            // 创建和原始数据结构一致的对象
            var rowObj = {
                property: $(actualData[0]).text(),
                value: $(actualData[1]).text()
            };
            exportData.push(rowObj);
        };
    })
    console.log("data after export:")
    console.log(exportData)
})

完整的修改后代码 #

如果你需要完整的参考，这里是调整后的整个HTML文件：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Table Test</title> 
    <!-- d3.js framework --> 
    <script src="https://d3js.org/d3.v6.js"></script> 
    <!-- jquery import--> 
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> 
    <!-- fontawesome stylesheet https://fontawesome.com/ --> 
    <script src="https://kit.fontawesome.com/39094309d6.js" crossorigin="anonymous"></script> 
</head> 
<style> 
    #myTable { border-collapse: collapse; } 
    #myTable td { border: 1px solid black; padding: 8px; } 
    #delRow { width: auto; height: 30px; } 
</style> 
<body> 
    <table id="myTable"> 
        <th> Property </th> 
        <th> Value </th> 
        <tbody> 
            <!-- filled by script --> 
        </tbody> 
    </table> 
    <button id="dataToArray">dataToArray</button> 
    <script> 
        data = [ 
            { "property": "animal", "value": "dog" }, 
            { "property": "car", "value": "audi" }, 
            { "property": "snacks", "value": "chips" } 
        ] 
        //populate table 
        var myTable = document.getElementById("myTable") 
        for (var i = 0; i < data.length; i++ ) { 
            var row = `<tr> 
                <td>${data[i].property}</td> 
                <td>${data[i].value}</td> 
            </tr>` 
            myTable.innerHTML += row 
        } 
        //get table data 
        var dataToArray = document.getElementById("dataToArray") 
        dataToArray.addEventListener("click", function() { 
            console.clear() 
            console.log("data before export:") 
            console.log(data) 
            var exportData = [] 
            $("table#myTable tr").each(function() { 
                var actualData = $(this).find("td"); 
                if (actualData.length > 0) { 
                    var rowObj = {
                        property: $(actualData[0]).text(),
                        value: $(actualData[1]).text()
                    };
                    exportData.push(rowObj); 
                }; 
            }) 
            console.log("data after export:") 
            console.log(exportData) 
        }) 
    </script> 
</body> 
</html>

为什么这样改？ #

原来的代码只是把每个单元格的文本依次push到数组里，得到的是[["animal", "dog"], ["car", "audi"], ...]这样的结构。现在我们直接构建和原始数据一致的对象，把第一列的文本对应到property属性，第二列对应到value属性，导出后的数组就会是[{property: "animal", value: "dog"}, ...]，和你最初的data数组结构完全匹配了。

内容的提问来源于stack exchange，提问作者ICoded