2016-08-10 6 views
1

このプロジェクトにはという別のデベロッパーが置かれていました。私はdivsの束を使ってテーブルを作成しました。私はExcelにこれらのテーブルをエクスポートする担当した。唯一の問題は、これらが通常のHTMLテーブルではないことです。彼らはテーブルのように見えるように作られたdivsの束です。divテーブルを通常のテーブルに変換する

divテーブルの外観を通常のHTMLテーブルに変換する方法はありますか?または、この外観のテーブルをエクスポートして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> 
+0

あなたの質問にこれらのdivのテーブルの1例を追加する必要があります。 – paul

+0

検索と置換ができます。または、レンダリングされたHTMLをコピーして、直接Excelに貼り付けることもできます。 – durbnpoisn

答えて

1

あなたは、それをpopultate divを削除し、tableを追加するdiv内のすべての.row.column要素をtable、ループを作成するためにJavaScriptを使用することができます。ここで私は非常に迅速に一緒にあなたを始めるために投げたものです。 (私は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>

0

です。これらのdivのデータはクエリ結果から取り込まれていますが、今回は別のforeachループを実行して、テーブルセルに適切に挿入することをお勧めします。このテーブルを常に表示するように設定することができます。重複を表示したくない場合。代わりに、data-row = "1"、data-column = "2"などのdivにデータ属性を設定してから、javascriptでそれらを操作してテーブルに挿入します。必要なデータ構造を取得したら、this pluginを使用して結果をCSVファイルに簡単に書き出すことができます。しかし、あなたが必要

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

はそこから、あなたはそれをスタイルすることができ、またはそれはExcelにコピー可能でなければなりません:

0

はすぐにこのCSSを使用し、表としてこれをフォーマットします。

マークアップをテーブルに変更したい場合は、かなり簡単です。 divtableタグで、<div class="row">の要素をtrtdと置き換えてください。例を次に示します。

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

関連する問題