Skip to content

Convert Table to Divs with jQuery

Dynamically converting a table, table row (tr), or table cell (td) to be div-based may seem difficult, but it’s surprisingly simple, if you have a div in each cell containing all its content.

Rather than replacing the table, tr or td tags with div, you can use jQuery to create an element after the table, then fill it with the content of the table cells.

For instance, say I have the following:

<table class="productTable ">
  <tbody>
    <tr>
      <td class="productItem">
        <div class="product_item">
         Product 1
        </div>
      </td>
      <td class="productItem">
        <div class="product_item">
         Product 2
        </div>
      </td>
    </tr>
  </tbody>
</table>

After including jQuery, I can call the following function:

$(".productTable").after("<div id='product-container'></div>");
$(".productTable .product_item").appendTo("#product-container").each(function() {});
$('.productTable').remove();

The div under td (.product_item) is moved to the newly created div#product-container and the original table is removed.

4 Comments

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

    • Stephen Saucier Stephen Saucier

      In our case, we were working with Business Catalyst’s Shop, which has no HTML template customisation options whatsoever. Thanks for letting us know about the plugin!

Leave a Reply