将div表转换为普通表 [英] Converting div table to normal table

问题描述

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

I was put on this project and the other developer before me used a bunch of divs to create a table. I was put in charge of exporting these tables to Excel. The only problem is that these aren't normal HTML tables. They are a bunch of divs made to look like a table.

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

Is there a way to convert the div table look alike to a normal HTML table? Or could I still export this look alike table to 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创建表，遍历所有 .row 和填充 div 中的.column 元素，删除 div 并附加 table .为了快速起步，我快速整理了一些内容.(我注释掉了删除 div 的行，因此您可以在结果中看到两者.)

You could use JavaScript to create a table, loop through all the .row and .column elements in the div to popultate it, remove the div and append the table. Here's something I threw together very quickly to get you started. (I commented out the line that removes the div so you can see both in the results).

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表转换为普通表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！