在javascript中將html表資料決議為JSON陣列-有解無憂

我正在抓取一個網頁，需要從<table>JSON 格式中回傳資料。有一個<table >嵌套多個嵌套<table >（在下面的代碼中我只粘貼了 2 個）。從這些嵌套表中，我想回傳一個帶有單元格資料的 JSON 陣列。總是有 4 個具有不同類名的單元格。第一個是日期字串，其他三個是<div>. 下面我將我想要的輸出放在 JSON 中。我不熟悉 javascript，所以這就是我到現在為止想出的全部內容：

var t = document.querySelectorAll('table.mydetails');
t.forEach(function(table) {
    datas = table.querySelectorAll("td");
    datas.forEach(function(cell) {
        
        var divs = cell.querySelectorAll('div');
        
        divs.forEach(function(div) {
            console.log(div.textContent);
        });
    });
});

我相信有更好的方法可以做到這一點，如果有人能在這里給我一點幫助，我將不勝感激。

這是我的網頁：

<html>
<table class="grid_table">
    <tbody>
        <tr class="grid_row_1 grid_row_pr_2021-11-01" role="row">
            <td role="gridcell">
                <div class="classCell">
                    <div class="classMultiLine">
                        <table class="mydetails">
                            <tr class="">
                                <td class="td-e">01.11.2021</td>
                                <td class="td-d Target">
                                    <div class="">Foo1</div>
                                </td>
                                <td class="td-d Mine">
                                    <div class="">Bar1</div>
                                </td>
                                <td class="td-d His">
                                    <div class="">FooBar1</div>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="classMultiLine">empty</div>
                    <div class="classMultiLine">empty</div>
                </div>
            </td>
        </tr>
        <tr class="grid_row_2 grid_row_pr_2021-11-02" role="row">
            <td role="gridcell">
                <div class="classCell">
                    <div class="classMultiLine">
                        <table class="mydetails">
                            <tr class="">
                                <td class="td-e">02.11.2021</td>
                                <td class="td-d Target">
                                    <div class="">Foo2</div>
                                </td>
                                <td class="td-d Mine">
                                    <div class="">Bar2</div>
                                </td>
                                <td class="td-d Hi">
                                    <div class="">FooBar2</div>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="classMultiLine">empty</div>
                    <div class="classMultiLine">empty</div>
                </div>
            </td>
        </tr>
    </tbody>
</table>
<script type="text/javascript">

這是我想要的輸出：

[
  {
    "date": "01.11.2021",
    "Target": "Foo1",
    "Mine": "Bar1",
    "His": "FooBar1"
  },
  {
    "date": "02.11.2021",
    "Target": "Foo2",
    "Mine": "Bar2",
    "His": "FooBar2"
  }
]

uj5u.com熱心網友回復：

試試這個答案。它包含了 DEMO 作業的代碼。只需在該演示中將底部的最后一行從console.dir(chartData);更改console.log(chartData);為即可在控制臺中查看結果。

uj5u.com熱心網友回復：

試試下面的JS代碼。

var t = document.querySelectorAll('table.mydetails');
var mainArray= [];
t.forEach(function(table) {
debugger;
    datas = table.querySelectorAll("td");
    var dateCell=datas[0].innerText;
    var targetCell=datas[1].children[0].innerText;
    var mineCell=datas[2].children[0].innerText;
    var hisCell=datas[3].children[0].innerText;
    
    var currentObject = {"date":dateCell, "Target":targetCell, "Mine":mineCell, "His":hisCell};
    mainArray.push(currentObject);
});
console.log(JSON.stringify(mainArray));

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/355095.html

標籤：javascript html

上一篇：如何在Django中的Python中的元組中傳遞一個特定的值？

下一篇：是否有代碼阻止當前選項卡在chrome中添加另一個選項卡？