将数据从html跨度获取到表中

Question

我正试图创建一个span元素的JSON，我设法获得了表，但我被困在了span元素的数据上，这是"console.log(项("：

{"innerHTML":"<thead><tr><th class="text-center"><i class="fas fa-edit" id="" style="font-size: 16px; opacity: 0.25"></i></th><th class="text-center"><i class="fas fa-print" id="" style="font-size: 16px; opacity: 0.25"></i></th><th class="text-center w-px whitespace-nowrap"><a href="/customers?Take=50&amp;SortBy=0&amp;Desc=True&amp;FileID=VGVzdA" class="text-neutral-500 hover:text-neutral-500 text-shadow dark:text-slate-400 dark:hover:text-slate-400 dark:text-shadow-none">Code</a></th><th class=""><a href="/customers?Take=50&amp;SortBy=1&amp;FileID=VGVzdA" class="text-neutral-500 hover:text-neutral-500 text-shadow dark:text-slate-400 dark:hover:text-slate-400 dark:text-shadow-none">Name</a></th><th class=""><a href="/customers?Take=50&amp;SortBy=3&amp;FileID=VGVzdA" class="text-neutral-500 hover:text-neutral-500 text-shadow dark:text-slate-400 dark:hover:text-slate-400 dark:text-shadow-none">zone</a></th><th class="text-center w-px whitespace-nowrap"><a href="/customers?Take=50&amp;SortBy=4&amp;Desc=True&amp;FileID=VGVzdA" class="text-neutral-500 hover:text-neutral-500 text-shadow dark:text-slate-400 dark:hover:text-slate-400 dark:text-shadow-none">Invoices</a></th><th class="text-right w-px whitespace-nowrap"><a href="/customers?Take=50&amp;SortBy=8&amp;Desc=True&amp;FileID=VGVzdA" class="text-neutral-500 hover:text-neutral-500 text-shadow dark:text-slate-400 dark:hover:text-slate-400 dark:text-shadow-none">Accounts receivable</a></th></tr></thead><tbody><tr><td style="width: 1px"><a href="/customer-form?Key=39cb2507-d07f-4357-987f-4451feee7b23&amp;FileID=VGVzdA&amp;Referrer=L2N1c3RvbWVycz9Ta2lwPTAmVGFrZT01MCZGaWxlSUQ9VkdWemRB" class="bg-white border border-neutral-300 text-neutral-700 rounded py-1 px-4 hover:border-neutral-400 hover:text-neutral-800 hover:no-underline hover:bg-neutral-100 hover:shadow-inner dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700" style="font-size: 11px">Edit</a></td><td style="width: 1px"><a href="/customer-view?Key=39cb2507-d07f-4357-987f-4451feee7b23&amp;Position=1&amp;MaxPosition=3&amp;FileID=VGVzdA&amp;Referrer=L2N1c3RvbWVycz9Ta2lwPTAmVGFrZT01MCZGaWxlSUQ9VkdWemRB" class="bg-white border border-neutral-300 text-neutral-700 rounded py-1 px-4 hover:border-neutral-400 hover:text-neutral-800 hover:no-underline hover:bg-neutral-100 hover:shadow-inner dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700" style="font-size: 11px">View</a></td><td class="content text-center w-px whitespace-nowrap"><span>D001</span></td><td class="content "><span>customer 1</span></td><td class="content "><span>A1</span></td><td class="content text-center w-px whitespace-nowrap"><span style="font-weight: bold"><a href="/sales-invoices?Customer=39cb2507-d07f-4357-987f-4451feee7b23&amp;FileID=VGVzdA&amp;Referrer=L2N1c3RvbWVycz9Ta2lwPTAmVGFrZT01MCZGaWxlSUQ9VkdWemRB">3</a></span></td><td class="content observer:blur-sm observer:hover:blur-none observer:hover:transition text-right w-px whitespace-nowrap"><span style="font-weight: bold"><a href="/customer-transactions?Customer=39cb2507-d07f-4357-987f-4451feee7b23&amp;FileID=VGVzdA&amp;Referrer=L2N1c3RvbWVycz9Ta2lwPTAmVGFrZT01MCZGaWxlSUQ9VkdWemRB">$ 130.00</a></span></td></tr><tr><td style="width: 1px"><a href="/customer-form?Key=787cf96e-3267-453c-868f-03f4ad452a3e&amp;FileID=VGVzdA&amp;Referrer=L2N1c3RvbWVycz9Ta2lwPTAmVGFrZT01MCZGaWxlSUQ9VkdWemRB" class="bg-white border border-neutral-300 text-neutral-700 rounded py-1 px-4 hover:border-neutral-400 hover:text-neutral-800 hover:no-underline hover:bg-neutral-100 hover:shadow-inner dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700" style="font-size: 11px">Edit</a></td><td style="width: 1px"><a href="/customer-view?Key=787cf96e-3267-453c-868f-03f4ad452a3e&amp;Position=2&amp;MaxPosition=3&amp;FileID=VGVzdA&amp;Referrer=L2N1c3RvbWVycz9Ta2lwPTAmVGFrZT01MCZGaWxlSUQ9VkdWemRB" class="bg-white border border-neutral-300 text-neutral-700 rounded py-1 px-4 hover:border-neutral-400 hover:text-neutral-800 hover:no-underline hover:bg-neutral-100 hover:shadow-inner dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700" style="font-size: 11px">View</a></td><td class="content text-center w-px whitespace-nowrap"><span>D002</span></td><td class="content "><span>customer 2</span></td><td class="content "><span>B2</span></td><td class="content text-center w-px whitespace-nowrap"><span style="font-weight: bold"><a href="/sales-invoices?Customer=787cf96e-3267-453c-868f-03f4ad452a3e&amp;FileID=VGVzdA&amp;Referrer=L2N1c3RvbWVycz9Ta2lwPTAmVGFrZT01MCZGaWxlSUQ9VkdWemRB">1</a></span></td><td class="content observer:blur-sm observer:hover:blur-none observer:hover:transition text-right w-px whitespace-nowrap"><span style="font-weight: bold"><a href="/customer-transactions?Customer=787cf96e-3267-453c-868f-03f4ad452a3e&amp;FileID=VGVzdA&amp;Referrer=L2N1c3RvbWVycz9Ta2lwPTAmVGFrZT01MCZGaWxlSUQ9VkdWemRB">$ 223.75</a></span></td></tr><tr><td style="width: 1px"><a href="/customer-form?Key=cdb7ee28-3c2a-4b50-b421-3c42a7bbcd02&amp;FileID=VGVzdA&amp;Referrer=L2N1c3RvbWVycz9Ta2lwPTAmVGFrZT01MCZGaWxlSUQ9VkdWemRB" class="bg-white border border-neutral-300 text-neutral-700 rounded py-1 px-4 hover:border-neutral-400 hover:text-neutral-800 hover:no-underline hover:bg-neutral-100 hover:shadow-inner dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700" style="font-size: 11px">Edit</a></td><td style="width: 1px"><a href="/customer-view?Key=cdb7ee28-3c2a-4b50-b421-3c42a7bbcd02&amp;Position=3&amp;MaxPosition=3&amp;FileID=VGVzdA&amp;Referrer=L2N1c3RvbWVycz9Ta2lwPTAmVGFrZT01MCZGaWxlSUQ9VkdWemRB" class="bg-white border border-neutral-300 text-neutral-700 rounded py-1 px-4 hover:border-neutral-400 hover:text-neutral-800 hover:no-underline hover:bg-neutral-100 hover:shadow-inner dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700" style="font-size: 11px">View</a></td><td class="content text-center w-px whitespace-nowrap"><span>D003</span></td><td class="content "><span>customer 3</span></td><td class="content "><span>B1</span></td><td class="content text-center w-px whitespace-nowrap"><span style="font-weight: bold"><a href="/sales-invoices?Customer=cdb7ee28-3c2a-4b50-b421-3c42a7bbcd02&amp;FileID=VGVzdA&amp;Referrer=L2N1c3RvbWVycz9Ta2lwPTAmVGFrZT01MCZGaWxlSUQ9VkdWemRB">-</a></span></td><td class="content observer:blur-sm observer:hover:blur-none observer:hover:transition text-right w-px whitespace-nowrap"><span style="font-weight: bold"><a href="/customer-transactions?Customer=cdb7ee28-3c2a-4b50-b421-3c42a7bbcd02&amp;FileID=VGVzdA&amp;Referrer=L2N1c3RvbWVycz9Ta2lwPTAmVGFrZT01MCZGaWxlSUQ9VkdWemRB">- $ 60.00</a></span></td></tr><tr><th></th><th></th><th></th><th></th><th></th><th class="observer:blur-sm observer:hover:blur-none observer:hover:transition font-semibold text-neutral-500 text-shadow text-center w-px whitespace-nowrap"><div>4</div></th><th class="observer:blur-sm observer:hover:blur-none observer:hover:transition font-semibold text-neutral-500 text-shadow text-right w-px whitespace-nowrap"><div>$ 293.75</div></th></tr></tbody>"}

这是我的尝试：

const url = 'http://127.0.0.1:55667/customers?FileID=VGVzdA'
var x = document.querySelector("#printable-content > table:nth-child(1) > thead > tr:nth-child(1) > td > table:nth-child(2) > tbody > tr > td:nth-child(1) > div:nth-child(1) > b:nth-child(1)").textContent;
fetch(url).then(function (response) {
return response.text();
}).then(function (html) {
// Convert the HTML string into a document object
var parser = new DOMParser();
var doc = parser.parseFromString(html, 'text/html');
var y = doc.querySelector("#table > div.overflow-x-auto.lg\:overflow-visible.no-scrollbar > table").innerHTML;
// Getting data from spans
myObj = {innerHTML:"yyy"};
myObj.innerHTML = y;
items = JSON.stringify(myObj);
console.log(items);

}).catch(function (err) {
// There was an error
alert('Something went wrong.', err);
});

这是所需的结果，它是html:中的所有跨度元素

{
"data": [
"D001",
"customer 1",
"A1",
"4",
"$ 155.00",
"D002",
"customer 2",
"B2",
"1",
"$ 223.75",
"D003",
"customer 3",
"B1",
"-",
"- $ 60.00"
]
}

Answer 1

我解决了这个问题，所以我要在这里为其他人发布我的答案：

// Convert the HTML string into a document object
var parser = new DOMParser();
var doc = parser.parseFromString(html, 'text/html');
var y = doc.querySelector("#table > div.overflow-x-auto.lg\:overflow-visible.no-scrollbar > table");

// Getting data from spans
var appendText = [];
const nodeList = y.querySelectorAll("span");
for (let i = 0; i < nodeList.length; i++) {
appendText.push(nodeList[i].textContent);
}
var itemsObj = {data:appendText};
data = JSON.stringify(itemsObj);
console.log(data);