How can I use jQuery to convert an HTML table into <div>'s?

Question

How could I go about converting an HTML table (I will provide code below) into <div> elements? Long story short, I am using a PHP script that outputs contents into an HTML table and it has proven very difficult to edit the PHP and convert the table elements into <div>'s. Below is the HTML table code:

<table><tbody><tr data-marker="0"><td class="mapp-marker"><img class="mapp-icon" src="http://www.walmartchicago.com/wp-content/plugins/mappress-google-maps-for-wordpress/icons/walmart-yellow.png"></td><td><b>Walmart Neighborhood Market<br></b><a href="#" class="poi_list_directions">Get Directions</a></td></tr><tr data-marker="1"><td class="mapp-marker"><img class="mapp-icon" src="http://www.walmartchicago.com/wp-content/plugins/mappress-google-maps-for-wordpress/icons/walmart-red.png"></td><td><b>Walmart Express<br></b><a href="#" class="poi_list_directions">Get Directions</a></td></tr><tr data-marker="2"><td class="mapp-marker"><img class="mapp-icon" src="http://www.walmartchicago.com/wp-content/plugins/mappress-google-maps-for-wordpress/icons/walmart-red.png"></td><td><b>Walmart Express<br></b><a href="#" class="poi_list_directions">Get Directions</a></td></tr><tr data-marker="3"><td class="mapp-marker"><img class="mapp-icon" src="http://www.walmartchicago.com/wp-content/plugins/mappress-google-maps-for-wordpress/icons/walmart-blue.png"></td><td><b>Walmart Supercenter<br></b><a href="#" class="poi_list_directions">Get Directions</a></td></tr><tr data-marker="4"><td class="mapp-marker"><img class="mapp-icon" src="http://www.walmartchicago.com/wp-content/plugins/mappress-google-maps-for-wordpress/icons/walmart-blue.png"></td><td><b>Walmart Supercenter<br></b><a href="#" class="poi_list_directions">Get Directions</a></td></tr></tbody></table>

Answer 1

No need to loop through the elements and copy the attributes, just pull the table contents as a string and run a simple string replace ...

$('table').replaceWith( $('table').html()
   .replace(/<tbody/gi, "<div id='table'")
   .replace(/<tr/gi, "<div")
   .replace(/<\/tr>/gi, "</div>")
   .replace(/<td/gi, "<span")
   .replace(/<\/td>/gi, "</span>")
   .replace(/<\/tbody/gi, "<\/div")
);

... or, if you want an unordered list ...

$('table').replaceWith( $('table').html()
   .replace(/<tbody/gi, "<ul id='table'")
   .replace(/<tr/gi, "<li")
   .replace(/<\/tr>/gi, "</li>")
   .replace(/<td/gi, "<span")
   .replace(/<\/td>/gi, "</span>")
   .replace(/<\/tbody/gi, "<\/ul")
);

This will also retain your classes and attributes.

Perhaps the best solution isn't jQuery related, but PHP ... you could use PHP's str_replace() to do the same thing, only before outputting from PHP?

$table_str = //table string here
$UL_str = str_replace('<tbody', '<ul id="table"', $table_str);
$UL_str = str_replace('<tr', '<li', $UL_str);
$UL_str = str_replace('</tr', '</li', $UL_str);
$UL_str = str_replace('<td', '<span', $UL_str);
$UL_str = str_replace('</td', '</span', $UL_str);
$UL_str = str_replace('</tbody', '</ul"', $UL_str);

Answer 2

It does seem like a crazy thing to have to do. I just wrote a jQuery plugin to do this though. Working with an old web app where we don't want to really dig into the backend code and are on a limited budget. So, just taking the data that is dumped out in tables, converting them to divs, so I can float them around, style them up and make the data look better.

The system is rending data that is not really 'tabular' data.

https://github.com/ryandoom/jquery-plugin-table-to-div

If anyone is interested in the future.