javascript - 将div表转换为普通表

在我使用一堆divs创建表之前，我被安排在这个项目和其他开发人员上。我负责将这些表导出到Excel。唯一的问题是这些不是普通的HTML表。它们是一堆看起来像表格的divs。

有没有一种方法可以将div表转换成普通的HTML表？还是我仍然可以将此外观相似的表格导出到Excel？

这是一个简单的例子

<div>
    <div class="row">
        <div class="column">Info</div>
        <div class="column">Info</div>
        <div class="column">Info</div>
        <div class="column">Info</div>
        <div class="column">Info</div>
    </div>
    <div class="row">
        <div class="column">Info</div>
        <div class="column">Info</div>
        <div class="column">Info</div>
        <div class="column">Info</div>
        <div class="column">Info</div>
    </div>
    <div class="row">
        <div class="column">Info</div>
        <div class="column">Info</div>
        <div class="column">Info</div>
        <div class="column">Info</div>
        <div class="column">Info</div>
    </div>
</div>

最佳答案

您可以使用JavaScript创建table，循环遍历.row中的所有.column和div元素以填充，删除div并附加table。为了让您起步，我快速整理了一些内容。 (我注释掉了删除div的行，因此您可以在结果中看到两者)。

var body=document.body,
    parent=body.querySelector(".table"),
    rows=parent.querySelectorAll(".row"),
    table=document.createElement("table"),
    tbody=document.createElement("tbody"),
    row=document.createElement("tr"),
    cell=document.createElement("td"),
    x=rows.length,
    cells=rows[0].querySelectorAll(".column"),
    y=cells.length,
    i,j;
table.appendChild(tbody)
for(i=0;i<x;i++){
    row=row.cloneNode(0);
    cells=rows[i].querySelectorAll(".column");
    y=cells.length;
    for(j=0;j<y;j++){
        cell=cell.cloneNode(0);
        cell.innerHTML=cells[j].innerHTML;
        row.appendChild(cell);
    }
    tbody.appendChild(row);
}
body.appendChild(table);
//body.removeChild(parent);

table{
    color:#f00;
}
.table{display:table;}
.row{display:table-row;}
.column{display:table-cell;}

<div class="table">
    <div class="row">
        <div class="column">Info</div>
        <div class="column">Info</div>
        <div class="column">Info</div>
        <div class="column">Info</div>
        <div class="column">Info</div>
    </div>
    <div class="row">
        <div class="column">Info</div>
        <div class="column">Info</div>
        <div class="column">Info</div>
        <div class="column">Info</div>
        <div class="column">Info</div>
    </div>
    <div class="row">
        <div class="column">Info</div>
        <div class="column">Info</div>
        <div class="column">Info</div>
        <div class="column">Info</div>
        <div class="column">Info</div>
    </div>
</div>