Post
Ask Question

How To Convert HTML Table into Div Tag

Using jquery we can convert html table into html div tag. All tr & td converted in to div tag. Jquery function converting table in to div, see below jquery function:
  1. <script type = "text/javascript" > $('table').replaceWith(function() {  
  2.     var html = '';  
  3.     $('tr', this).each(function() {  
  4.         html += '<div>';  
  5.         $('td', this).each(function() {  
  6.             html += '<div>' + $(this).html() + '</div>';  
  7.         });  
  8.         html += '</div>';  
  9.     });  
  10.     return '<div>' + html + '</div>';  
  11. });   
  12. < /script>  
  13. Table :  
  14. <table>  
  15.  <tr>  
  16.  <td width="180" valign="top" id="maintable-toc">  
  17.  <div id="toc">  
  18.  <h2>  
  19.  <a id="toc-title" href="index.htm">Table of Contents</a > < /h2>  
  20.  <ol class="section">  
  21.  <li>  
  22.  <div class="currentpage">  
  23.                                 Basics</div > < ol > < li > < a href = "page_02.htm" > Pages < /a></li > < li > < a href = "page_03.htm" > Sections < /a></li > < li > < a href = "page_04.htm" > Headings < /a></li > < /ol>  
  24.  </li > < li > < a href = "page_07.htm" > Images < /a></li > < /ol>  
  25.  </div > < /td>  
  26.  <td width="*" valign="top" id="maintable-content">  
  27.  <div id="main-content-withtoc">  
  28.  <a name="Main"></a > < h2 > Basics < /h2>  
  29.  <p>This section looks at the basics of work.</p > < /div>  
  30.  </td > < /tr>  
  31. </table >