将div表转换为普通表

本文介绍了将div表转换为普通表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

在我使用一堆 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>