The problem个
我try 循环遍历一个包含嵌套行的表，并将所有数据导出到CSV.以下是数据 struct :
- 配置文件
- 配置文件 > Linked users
数据来自API，它是一个包含嵌套对象的数组，然后我循环这些对象并将其输出到视图.
My attempt个
我的当前逻辑部分工作，但将任何具有嵌套行的表行解释为一个组合行.
我可以循环遍历表行，但不能排除组合的行，因此我得到以下输出:
Current result个
- 汤姆
- 汤姆 杰克 萨姆 亚历克斯 (combined)
- 杰克
- 萨姆
- 亚历克斯
- 乔什
Expected result个
- 汤姆
- 杰克
- 萨姆
- 亚历克斯
- 乔什
Codepen example个
下面是一个记录输出的基本示例:https://codepen.io/joshuarobertson/pen/xxQjmgV
Table data structure个
这是表 struct 的基本示例:
/*
** Export table data to CSV
*/
function exportToCsv() {
// Get the table element
var table = document.querySelector('table')
// Create an empty array to store the cell values
var cellValues = []
// Get the table headers from the thead section
var headerValues = []
table.querySelectorAll('thead th').forEach(function(header) {
headerValues.push(header.textContent.trim())
})
// Add the header values to the main cell values array
cellValues.push(headerValues.join(','));
// Function to process the rows recursively
function processRows(rows) {
rows.forEach(function(row) {
var rowValues = []
// Check if the row has nested tables
var nestedTables = row.querySelectorAll('table');
if (nestedTables.length > 0) {
// Process nested tables recursively
nestedTables.forEach(function(nestedTable) {
var nestedRows = nestedTable.querySelectorAll('tr')
console.log(nestedRows[0].innerText)
console.log(nestedRows[1].innerText)
console.log(nestedRows[2].innerText)
processRows(nestedRows)
});
} else {
// Loop over each cell of the row
row.querySelectorAll('td').forEach(function(cell) {
rowValues.push(cell.textContent.trim())
});
// Add the row values to the main cell values array
cellValues.push(rowValues.join(','))
}
})
}
// Process the top-level table rows
var topRows = table.querySelectorAll('tbody tr')
processRows(topRows)
// Log the comma-separated list to the console
console.log(cellValues.join('\n'))
// Combine each row data with new line character
csv_data = csv_data.join('\n')
// Call this function to download csv file
downloadCsv(csv_data)
}
/*
** Download CSV
*/
function downloadCsv(csv_data) {
// Create CSV file object and feed
// our csv_data into it
csv_data = new Blob([csv_data], {
type: "text/csv"
})
// Create to temporary link to initiate
// download process
const temp_link = document.createElement('a')
// Download csv file
temp_link.download = "GfG.csv"
const url = window.URL.createObjectURL(csv_data)
temp_link.href = url
// This link should not be displayed
temp_link.style.display = "none"
document.body.appendChild(temp_link)
// Automatically click the link to
// trigger download
temp_link.click()
document.body.removeChild(temp_link)
}<table border="1" cellspacing="0" cellpadding="10">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Town</th>
</tr>
</thead>
<tbody>
<tr>
<td>汤姆</td>
<td>20</td>
<td>London</td>
</tr>
<tr>
<td colspan="3">
<table>
<tbody>
<tr>
<td>杰克</td>
<td>30</td>
<td>Glasgow</td>
</tr>
</tbody>
<tbody>
<tr>
<td>萨姆</td>
<td>40</td>
<td>Belfast</td>
</tr>
<tr>
<td>亚历克斯</td>
<td>50</td>
<td>Hull</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>乔什</td>
<td>20</td>
<td>Cardiff</td>
</tr>
</tbody>
</table>