title: How to make table view dynamically in jquery on load
body: <p>I am beginner in jquery mobile .I just want to make table view dynamically in jquery mobile .?</p>
  
  <p>i found lot of example but all are static .I want make table view using (ul ,li)or (tr td) in jquery mobile.</p>
  
  <p>As shown in figure with black circle i need this type of table view which is create dyanically.</p>
  
  <p>sorry due to problem i am not able to attached image.</p>
  
  <p>i used this code but not able to display table .here is my code.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no"&gt;
    &lt;meta name="apple-mobile-web-app-capable" content="yes"&gt;
    &lt;meta name="apple-mobile-web-app-status-bar-style" content="black"&gt;
  
  
    &lt;link rel="stylesheet" href="css/jquery.mobile-1.3.1.css"&gt;
  
  
    &lt;link rel="stylesheet" href="css/jquery.mobile.theme-1.3.1.css"&gt;
  
  
    &lt;script src="js/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
    &lt;script src="js/jquery.mobile-1.3.1.min.js"&gt;&lt;/script&gt;
    &lt;script src="js/jquery.mobile-1.3.1.min.js"&gt;&lt;/script&gt;
    &lt;script src="js/jquery.mobile-1.3.1.js"&gt;&lt;/script&gt;
  
    &lt;!-- Extra Codiqa features --&gt;
  
  
  &lt;/head&gt;
  &lt;style&gt;
  
    .ui-page {
    background : transparent url(img/Background-Screen.png) 0 0 no-repeat fixed !important;
    background-size : cover;
  }
  
  &lt;/style&gt;
  
  
  &lt;body&gt;
  
  
  
      &lt;!--page one My Cases Screen-------------&gt;
    &lt;div data-role="page" id="Home"&gt;
     &lt;div data-role="header" data-theme="b"&gt;
    &lt;h1 class="ui-title"  id="hdr" style="text-align:left;margin-left: 20px;"&gt;My Cases&lt;/h1&gt;
    &lt;div class="ui-btn-right" id="addbuttons" data-role="controlgroup" data-type="horizontal"&gt; 
    &lt;a href="#" data-role="button" data-inline="true" data-iconpos="notext" data-icon="gear" data-theme="b"&gt;Setting&lt;/a&gt;
   &lt;a href="#newevent1" data-role="button" data-iconpos="notext" data-inline="true" data-icon="plus" data-theme="b" data-rel="dialog"&gt;Add&lt;/a&gt;
   &lt;a href="#newevent1" data-role="button" data-inline="true" data-theme="b" data-rel="dialog"&gt;Edit&lt;/a&gt;
    &lt;/div&gt;
    &lt;/div&gt;
      &lt;div data-role="content"&gt;
  
      &lt;p&gt; Window content &lt;/p&gt;  
  
    &lt;/div&gt;   
  
  
    &lt;/div&gt;
  
  
  
  
  
  
  &lt;/body&gt;
  
  
   &lt;script &gt;
  
   $(document).ready(function () {
   // $('.ui-loader').remove();
    $.mobile.loading('hide');
  
      var html = "";
  
  html += "&lt;div class=ui-grid-b&gt;";
  
  html +=   "&lt;div class=ui-block-a&gt;Element 1.1&lt;/div&gt;";
  
  html +=   "&lt;div class=ui-block-b&gt;Element 1.2&lt;/div&gt;";
  
  html +=   "&lt;div class=ui-block-c&gt;Element 1.3&lt;/div&gt;";
  
  html +=   "&lt;div class=ui-block-a&gt;Element 2.1&lt;/div&gt;";
  
  html +=   "&lt;div class=ui-block-b&gt;Element 2.2&lt;/div&gt;";
  
  html +=   "&lt;div class=ui-block-c&gt;Element 2.3&lt;/div&gt;";
  
  html += "&lt;/div&gt;";
  
  $("#home div:jqmData(role=content)").append (html);
  });
  
  
  &lt;/script&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Thanks</p>