title: Fill HTML <table> dynamically based on xmlhttp.responseText
body: <p>Currently I have a JavaScript function which has been serving me well when I know the number of results that will be returned from my PHP side (I prepare my HTML tables before, knowing that only one line would be returned as an example), as follows:</p>
  
  <pre><code>&lt;script&gt;
     function findInfo(str1, str2) {
  
         var searchOne (str1.value);
         var searchTwo = (str2.value);
  
         if (searchOne.length === 0 || searchTwo.length === 0) {
             document.getElementById("existingTableCell").innerHTML = "Missing mandatory field(s)!";                    
             return;
         } else {                    
             var xmlhttp = new XMLHttpRequest();
             xmlhttp.onreadystatechange = function ()
             {
                 if (xmlhttp.readyState === 4 &amp;&amp; xmlhttp.status === 200)
                 {                        
                     var splitResponse = xmlhttp.responseText.split(":",5);                                                        
                     var firstCell = splitResponse[0];                            
                     var secondCell = splitResponse[1];                            
                     var thirdCell = splitResponse[2];                           
                     var fourthCell = splitResponse[3];                            
                     var fifthCell = splitResponse[4];                            
  
                     document.getElementById("cellID1").innerHTML = firstCell;
                     document.getElementById("cellID2").innerHTML = secondCell;
                     document.getElementById("cellID3").innerHTML = thirdCell;
                     document.getElementById("cellID4").innerHTML = fourthCell;
                     document.getElementById("cellID5").innerHTML = fifthCell;
  
                 }
             };
  
             xmlhttp.open("GET", "myPHPLogic.php?varA="+ searchOne + "&amp;varB=" +  searchTwo, true);                    
             xmlhttp.send();                    
         }
     }
  &lt;/script&gt;
  </code></pre>
  
  <p>But now seeing as though the MSSQL query that get's run on the PHP side could have an indeterminate number of rows return I don't see how I can keep using this xmlhttp.responseText.split method and pre created tables?</p>
  
  <p>Not sure what would be the best method to handle this requirement? Do I build the new rows in the JavaScript function as I try and work through the xmlhttp.responseText?</p>
  
  <p>UPDATE I just cannot wrap my head around this syntax and logic, I have tried for hours now :(</p>
  
  <pre><code>&lt;script&gt;
  function findInfo(str1, str2) {
  
      var searchOne (str1.value);
      var searchTwo = (str2.value);
  
      if (searchOne.length === 0 || searchTwo.length === 0) {
          document.getElementById("existingTableCell").innerHTML = "Missing mandatory field(s)!";                    
          return;
      } else {                    
          var xmlhttp = new XMLHttpRequest();
          xmlhttp.onreadystatechange = function ()
          {
              if (xmlhttp.readyState === 4 &amp;&amp; xmlhttp.status === 200)
              {                        
                  /* 
                     I HAVE A MSSQL RESPONSE COMING BACK FROM THE PHP THAT WOULD LOOK AS FOLLOWS:
                     Value: Value2: Value3: Value4: ETC: ETC:                 
                  */
  
                  var responseSplit = xmlhttp.responseText.split(":");                
                  //Value, Value2, Value3, Value4, ETC, ETC,
  
                  /*
                    I have a table that looks as follows:
                    Column 1   Column 2   Column 3
  
                    I want to insert //Value, Value2, Value3, Value4, ETC, ETC, all in their own cell in column 1..
                  */              
  
                  var arrayLength = responseSplit.length;                                                                   
                  for (var i = 0; i &lt; arrayLength; i++) {                                                                                         
                      $(tableOne).find(tableOneBody).find(tableOneTableRow1).append("&lt;td&gt;"+responseSplit[i]+"&lt;/td&gt;");
                  }
              };
  
              xmlhttp.open("GET", "myPHPLogic.php?varA="+ searchOne + "&amp;varB=" +  searchTwo, true);                    
              xmlhttp.send();                    
          }
      }
  &lt;/script&gt;
  </code></pre>