tafhim / jquery-plugin-table-to-div Goto Github PK

This plugin was developed to convert tabular output into divs for more control of style and layout. In a popular CMS we use it’s easy to write custom SQL to pull data out of the database and render it in a table. It’s a lot more work to try and query that data and then output that data in a more usable format that can be styled.

This is a quick little way to just convert the table.

Select the table you want to convert

.table_to_div() takes two optional arguments.

prefix: which will prefix your divs with something you select, or if you leave it empty it will prefix everything with tg

target: if you specify a target it will add the div conversion into that target element. This would most likely be an id or class for another div on the page.

If left empty the divs will be added before your table.

<script type="text/javascript">
  jQuery(function() {      
    $(".my_table").table_to_div({prefix:'my_div',target:'#place_converted_data_should_go'});

    //$(".my_table").hide();
  }); 
</script>

Example here has mixed th / td in the header row to support both syntax. Currently designed where the leading row is always a header row.

<div id="place_converted_data_should_go"></div>

<table class="my_table">
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <td>Company</td>
    <td>Image Path</td>
    <td>Address</td>
    <td>Address 2</td>
    <td>City</td>
    <td>State</td>
    <td>Zip</td>
  </tr>
  <tr>
    <td>Ryan</td>
    <td>Doom</td>
    <td>Web Ascender</td>
    <td>/whatever/something.jpg</td>
    <td>4151 Okemos Rd</td>
    <td>STE B</td>
    <td>Okemos</td>
    <td>Michigan</td>
    <td>48864</td>    
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>Web Ascender</td>
    <td>/images/whatever.jpg</td>
    <td>4151 Okemes Road.</td>
    <td>STE B.</td>
    <td>Okemos</td>
    <td>MI</td>
    <td>48864</td>
  </tr>
</table>

Conversion of the above table. Right now it removes the spaces out of the heading rows, but a future change may be to remove any invalid characters for a class element.

<div class="my_div_container">
   <div class="my_div_1 my_div_group">
      <div class="my_div_FirstName my_div_row">
         <label>First Name</label>
         <span>Ryan</span>
      </div>
      <div class="my_div_LastName my_div_row">
         <label>Last Name</label>
         <span>Doom</span>
      </div>
      <div class="my_div_Company my_div_row">
         <label>Company</label>
         <span>Web Ascender</span>
      </div>
      <div class="my_div_ImagePath my_div_row">
         <label>Image Path</label>
         <span>/whatever/something.jpg</span>
      </div>
      <div class="my_div_Address my_div_row">
         <label>Address</label>
         <span>4151 Okemos Rd</span>
      </div>
      <div class="my_div_Address2 my_div_row">
         <label>Address 2</label>
         <span>STE B</span>
      </div>
      <div class="my_div_City my_div_row">
         <label>City</label>
         <span>Okemos</span>
      </div>
      <div class="my_div_State my_div_row">
         <label>State</label>
         <span>Michigan</span>
      </div>
      <div class="my_div_Zip my_div_row">
         <label>Zip</label>
         <span>48864</span>
      </div>
   </div>
   <div class="my_div_2 my_div_group">
      <div class="my_div_FirstName my_div_row">
         <label>First Name</label>
         <span>John</span>
      </div>
      <div class="my_div_LastName my_div_row">
         <label>Last Name</label>
         <span>Doe</span>
      </div>
      <div class="my_div_Company my_div_row">
         <label>Company</label>
         <span>Web Ascender</span>
      </div>
      <div class="my_div_ImagePath my_div_row">
         <label>Image Path</label>
         <span>/images/whatever.jpg</span>
      </div>
      <div class="my_div_Address my_div_row">
         <label>Address</label>
         <span>4151 Okemes Road.</span>
      </div>
      <div class="my_div_Address2 my_div_row">
         <label>Address 2</label>
         <span>STE B.</span>
      </div>
      <div class="my_div_City my_div_row">
         <label>City</label>
         <span>Okemos</span>
      </div>
      <div class="my_div_State my_div_row">
         <label>State</label>
         <span>MI</span>
      </div>
      <div class="my_div_Zip my_div_row">
         <label>Zip</label>
         <span>48864</span>
      </div>
   </div>
</div>

• Convert tabular data into div tags

• Transform a table into div

• Javascript to convert a table to div tags

• jQuery to convert table to div or span tags