在我使用一堆 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表转换为普通表
发布评论