Question

我参与了这个项目，而我之前的其他开发人员使用了一堆"%localappdata%\Microsoft\Windows\Explorer\"来创建表。我负责将这些表导出到Excel。唯一的问题是这些不是普通的HTML表。它们是一堆function callFunction(body, paramNames, params) { return new Function(paramNames, body)(params); }看起来像一张桌子。

有没有办法将divs表格外观转换为普通的HTML表格？或者我仍然可以将这个外观相似的表导出为excel吗？

这是一个简单的例子

divs

Answer 1

您可以使用JavaScript创建table，循环浏览.row中的所有.column和div元素，然后删除div并追加table。这是我很快就把你扔在一起的东西，让你开始。（我删除了删除div的行，以便您可以在结果中看到这两行。

＆＃13;

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);

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

Answer 3

要快速将其格式化为表格，请使用此CSS：

＆＃13;

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

＆＃13;

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

如果您想将标记更改为表格，则非常简单。您只需将div替换为table标记，将<div class="row">元素替换为tr，将列替换为td。示例如下。

＆＃13;

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

＆＃13;

将div表转换为普通表

3 个答案: