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.
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?
Here's a quick example
<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>
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>