title: PHP Ajax echo HTML table
body: <p>I have a problem outputting some data from PHP to HTML as a table. When I hit submit, the output is not really formatted into a HTML table. <strong><em>Code has been updated so everything works perfectly now.</em></strong>
  <img src="https://i.stack.imgur.com/EcbDo.jpg" alt="enter image description here"></p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC
  "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html401/loose.dtd"&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;AJAX Database&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          Type in the location &lt;input type="text" id="name"&gt;
          &lt;input type="submit" id="name-submit" value="Check Inventory"&gt;
          &lt;div id="name-data"&gt;&lt;/div&gt;
  
          &lt;script src="http://code.jquery.com/jquery-1.8.0.min.js"&gt;&lt;/script&gt;
          &lt;script src="js/global.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The <code>&lt;div id="name-data"&gt;&lt;/div&gt;</code> is like a placeholder for all the outputs after hitting submit button. <br />
  Here is PHP code. I tried to add HTML tags outside of PHP code but it won't work. </p>
  
  <pre><code>&lt;?php
      // '.post' could be '.get' here but global.js has to be the same, .post is faster
      if(isset($_POST['name']) === true &amp;&amp; empty($_POST['name']) === false) {
          require '../db/connect.php';
          // id, location, quantity, count_sheet, remark
          $query = mysql_query("
              SELECT `sheet0_100`.`id`, `sheet0_100`.`location`, 
                  `sheet0_100`.`quantity`, `sheet0_100`.`count_sheet`, `sheet0_100`.`remark`
              FROM `sheet0_100`
              WHERE `sheet0_100`.`location` = '" . mysql_real_escape_string(trim($_POST['name'])) . "'
          ");
          // echo (mysql_num_rows($query) !== 0) ? mysql_fetch_row($query) : 'Location not found..';
          if(mysql_num_rows($query) !== 0) {
              // Find out how many rows are available
              $rowsFound = @ mysql_num_rows($query);
  
              // Report how many rows were found
              echo "{$rowsFound} records found matching your criteria. \n";
  
              echo "There are $rowsFound items in this location.\n" . "\xA";
              echo "\n&lt;table&gt;";
              // Display a table contains all the items
              while ($rowsFound = mysql_fetch_row($query)) {
                  // ... start a TABLE row ...
                  echo "\n&lt;tr&gt;";
                  // ... and print out each of the attributes in that row as a
                  // separate TD (Table Data).
                  foreach($rowsFound as $data)
                      echo "\n\t&lt;td&gt; {$data} &lt;/td&gt;";
                      // Finish the row
                      echo "\n&lt;/tr&gt;";
              }
              // Then, finish the table
              echo "&lt;/table&gt;";
          }
          else {
              echo "Location not found..";
          }
  
  
      }
  ?&gt;
  </code></pre>
  
  <p>My JS file, </p>
  
  <pre><code>$('input#name-submit').on('click', function() {
      var name = $('input#name').val();
      if ($.trim(name) != '') {
          // '.post' could be '.get' here but name.php has to be the same, .post is faster
          $.post('ajax/name.php', {name: name}, function(data) {
              // $('div#name-data').text(data);
              // jQuery('#name-data').html(RESPONSE);
              $('div#name-data').html(data);
          });
      }
  });
  </code></pre>