Преобразование таблицы div в обычный стол

Question

Я был помещен в этот проект, и другой разработчик передо мной использовал кучу divs для создания таблицы. Мне было поручено экспортировать эти таблицы в Excel. Единственная проблема заключается в том, что это не обычные HTML-таблицы. Это пучок divs, сделанный так, чтобы выглядеть как таблица.

Есть ли способ конвертировать таблицу div в обычную таблицу HTML? Или я могу экспортировать этот похожий стол, чтобы преуспеть?

Вот краткий пример

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

Answer 1

Вы можете использовать JavaScript, чтобы создать table, цикл через все .row и .column элементов в div для popultate его, удалите div и добавьте table. Вот что я собрал очень быстро, чтобы вы начали. (Я прокомментировал строку, которая удаляет div, чтобы вы могли видеть оба результата).

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>

Answer 2

я на самом деле имел дело с этой конкретной проблемой в последнее время. Данные в этих divs заполняются из результатов запроса, я бы предложил запустить другой цикл foreach на этот раз, правильно вставив их в ячейки таблицы. Вы всегда можете отобразить эту таблицу: none; если вы не хотите отображать дубликаты. В качестве альтернативы я бы установил атрибуты данных для этих divs, таких как data-row = "1", data-column = "2" и т. Д., А затем манипулировать ими с помощью javascript и вставлять их в таблицу. Когда у вас есть желаемая структура данных, вы можете использовать this plugin, чтобы легко экспортировать результаты в файл CSV.

Answer 3

Чтобы быстро форматировать это в виде таблицы, использовать этот CSS:

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

Оттуда вы можете стиль его, как вам нужно, или она должна быть копируемой в Excel.

Если вы хотите изменить разметку на стол, это довольно просто. Вы просто замените внешний div тегом table, <div class="row"> элементами с tr и столбцами с td. Пример.

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