将 div table 转换为普通 table

Question

我被安排在这个项目上，在我之前的 other 开发人员使用一堆 divs 创建了一个 table。我负责将这些 table 导出到 Excel。唯一的问题是这些不是正常的 HTML table。它们是一堆 divs 看起来像 table。

有没有办法将 div table 的外观转换为正常的 HTML table？或者我仍然可以将看起来相似的 table 导出到 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>

Answer 1

我最近不得不处理这个确切的问题。这些 div 中的数据是从查询结果中填充的，我建议运行另一个 foreach 循环，这次将它们正确地插入 table 单元格中。您可以随时将此 table 设置为 display:none；如果您不想显示重复项。或者，我会为这些 div 设置数据属性，例如 data-row="1"、data-column="2" 等，然后使用 javascript 操作它们并将它们注入 table .获得所需的数据结构后，您可以使用 this plugin 轻松地将结果导出到 CSV 文件。

Answer 2

要快速将其格式化为 table，请使用 CSS:

div { display: table; }
div.row { display: table-row; }
div.column { display: table-cell; }

从那里，您可以根据需要设置样式，或者应该可以将其复制到 Excel。

如果您想将标记更改为 table，这很容易。您只需将外部 div 替换为 table 标记，将 <div class="row"> 元素替换为 tr，将列替换为 td。示例如下。

<table> <!-- was <div> -->
    <tr> <!-- was <div class="row"> -->
        <td> <!-- was <div class="column"> -->Info</td><!-- was </div> -->
        ...
    </tr> <!-- was </div> -->
</table> <!-- was </div> -->

Answer 3

您可以使用 JavaScript 创建一个 table，遍历 div 中的所有 .row 和 .column 元素来填充它，删除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>

将 div table 转换为普通 table

Converting div table to normal table

html

javascript

css

jquery

export-to-excel