export div table class to csv

Check this JSFillde link. It uses JQuery

Can you show us what your source looks like

Also, where do you want to do the export - how would this work - is it a once off?
If it is a once off you could potentially use a JavaScript code snippet to translate one into the other and then simply save the result - but to answer this we would need to see the code and understand a bit more about how the export is to work.

Leonidas, your link was for jquery tables, not div's (I've seen this already, it doesn't help in this situation unless you know how to change what it's looking for from table rows to div cells, in which case, I'd try that).

Julian,  I used a template from divtable.com  to begin with, it's now very customized, but the basics are still the same.
Essentially, I just want to use a button to export the tabular data (I.E. what's shown in all the <div class="divTableCell"> as a csv

Right now I luse a php sql call to populate the div table, I'd like to be able to export that data.  Yes, I can write a php function and call it if I have to but I was assuming there was an easier way without having to add a separate php file and further complicate things.

 I'm not posting my code as it's proprietary and confidential, but the here's the code I based it on.  I can extrapolate any answers based on this.

relevant HTML

<div class="divTable blueTable">
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell">cell1_1</div>
<div class="divTableCell">cell2_1</div>
</div>
<div class="divTableRow">
<div class="divTableCell">cell1_2</div>
<div class="divTableCell">cell2_2</div>
</div>
</div>
</div>
<div class="blueTable outerTableFooter">
<div class="tableFootStyle">
<div class="links"><a href="#">&laquo;</a> <a class="active" href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">&raquo;</a></div>
</div>
</div>
<form action="submit"><input type="submit" value="export" name="export_to_excel"></form>

Select allOpen in new window

CSS

div.blueTable {
  border: 1px solid #1C6EA4;
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}
.divTable.blueTable .divTableCell, .divTable.blueTable .divTableHead {
  border: 1px solid #AAAAAA;
  padding: 3px 2px;
}
.divTable.blueTable .divTableBody .divTableCell {
  font-size: 13px;
}
.blueTable .tableFootStyle {
  font-size: 14px;
  font-weight: bold;
  color: #FFFFFF;
  background: #D0E4F5;
  background: -moz-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
  background: -webkit-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
  background: linear-gradient(to bottom, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
  border-top: 2px solid #444444;
}
.blueTable .tableFootStyle {
  font-size: 14px;
}
.blueTable .tableFootStyle .links {
	 text-align: right;
}
.blueTable .tableFootStyle .links a{
  display: inline-block;
  background: #1C6EA4;
  color: #FFFFFF;
  padding: 2px 8px;
  border-radius: 5px;
}
.blueTable.outerTableFooter {
  border-top: none;
}
.blueTable.outerTableFooter .tableFootStyle {
  padding: 3px 5px; 
}
/* DivTable.com */
.divTable{ display: table; }
.divTableRow { display: table-row; }
.divTableHeading { display: table-header-group;}
.divTableCell, .divTableHead { display: table-cell;}
.divTableHeading { display: table-header-group;}
.divTableFoot { display: table-footer-group;}
.divTableBody { display: table-row-group;}

Select allOpen in new window

@Stephan,
Please use CODE tags for your code - it makes your post easier to read and refer to. (I have added these for you).
To add code tags is easy, simply
1. Highlight your code
2. Click the CODE button in the toolbar
I will address your question in a separate post.

This JavaScript will convert your <div> table to a regular table.

<script>
$(function() {
  // Variable to store current parentNode state
  // This tells us what row we are dealing with
  // Cells with the same parentNode are in the same row
  var pn = false;
  
  // A reference to the table we want to populate
  var target = document.getElementById('target');
  
  // Our initial row
  var row = target.insertRow();
  
  // For each cell in the div table
  $('.blueTable .divTableCell').each(function(i, e){
  
    // If the parentNodes are different we need
	// to create a new row
    if (pn && e.parentNode != pn) {
      row = target.insertRow();
    }
	
	// Save the current parentNode state
    pn = e.parentNode;
	
	// Add the next cell to the current row
    var cell = row.insertCell();
	
	// and populate it
    cell.innerHTML = e.innerHTML;
  });
});
</script>

Select allOpen in new window

You can see it working here

@Stephen,

Do you still require assistance with this question? If so post back here otherwise please close the question.