使用javascript创建html表

Build the table as a string, then assign to .innerHTML. Also, since data is an array, you need to iterate over that before iterating over the object properties.

function createTable(data) {
    var table = "<table align=\"left\" cellspacing=\"5\" cellpadding=\"8\"><tr><td align=\"left\"><b>TicketNum</b></td> <td align=\"left\"><b>Recieved</b></td><td align=\"left\"><b>SenderName</b></td><td align=\"left\"><b>Sender Email</b></td> <td align=\"left\"><b>Subject</b></td><td align=\"left\"><b>Tech</b></td><td align=\"left\"><b>Status</b></td><td align=\"left\"><b>Select</b></td></tr>";
    data.forEach(function(row) {
        table += "<tr>";
        for (var key in row) {
            if (!row.hasOwnProperty(key)) continue;
            table += "<td align=\"left\">" + row[key] + "</td>";
        }
        table += "</tr>";
    });
    table += "</table>";
    document.getElementById("table").innerHTML = table;
}

Actually, using for (var key in row) is probably not a good idea here. The order of properties in objects is not guaranteed, so you could get different orders on each row. You should create an array with the property names in the order that you want them, and loop over that to get the keys.

You can follow this logic. Create a page with the data, and a javascript code that will call this file and update a zone on your initial page.

On your php page (data.php)

echo '<table>
  <thead>
   <tr>
    <th>Col 1</th>
   </tr>
  </thead>
  <tbody>';

for ( $i = 0 ; $i < 5 : $i++ ) {
  // source of data, use anything
  echo '
  <tr>
    <td>My Col ', $i, '</td>
  </tr>';
}

echo '
  </tbody>
</table>';

On your first page:

<div id="content">
  <?php
    // include 'page.php'; // if needed, you can include directly the webpage if javascript is not activated
  ?>
</div>

And the javascript code:

<script>
function showTickets(httpRequest){
  if (httpRequest.readyState == 4) {
    if (httpRequest.status == 200){
      document.getElementById('content').innerHTML = httpRequest.responseText;
      console.log(httpRequest.responseText);
    }
    else{
      alert('Problem with request'); 
   }
}

// your ajax call, then the callback[showTickets(response)]
</script>

• getElementById('content') use the same ID than the <div id="content">
• There is only one .innerHTML assignation, or use correct equal ( [...].innerHTML += 'append')

<table id="table-id" align="left" cellspacing="5" cellpadding="8"> 
<tr><td align="left"><b>TicketNum</b></td>
<td align="left"><b>Recieved</b></td>
<td align="left"><b>SenderName</b></td>
<td align="left"><b>Sender Email</b></td>
<td align="left"><b>Subject</b></td>
<td align="left"><b>Tech</b></td>
<td align="left"><b>Status</b></td>
<td align="left"><b>Select</b></td></tr>';

// mysqli_fetch_array will return a row of data from the query
// until no further data is available
while($row = $result->fetch_assoc() ){

echo '<tr><td align="left">' . 
row['TicketNum'] . '</td><td align="left">' . 
row['Recieved'] . '</td><td align="left">' .
row['SenderName'] . '</td><td align="left">' . 
row['SenderEmail'] . '</td><td align="left">' . 
row['Subject'] . '</td><td align="left">' .
row['Tech'] . '</td><td align="left">' . 
row['Status'] . '</td><td align="left">' .

'</td><td align="left">';
</table>';


function showTickets(httpRequest){
        if (httpRequest.readyState == 4) {
            if (httpRequest.status == 200){
               alert("hi there");
               var data = JSON.parse(httpRequest.responseText);
               console.log(data);
               createTable(data);
            }
            else{
                alert('Problem with request'); 
            }
        }
    }

function createTable(data){
    var targetRows = "";
for(var key in data){                
        targetRows += '<td>'+data[key]+'</td>';
        }
var targetTable = "<table align=\"left\" cellspacing=\"5\" cellpadding=\"8\"><th><td align=\"left\"><b>TicketNum</b></td> <td align=\"left\"><b>Recieved</b></td><td align=\"left\"><b>SenderName</b></td><td align=\"left\"><b>Sender Email</b></td> <td align=\"left\"><b>Subject</b></td><td align=\"left\"><b>Tech</b></td><td align=\"left\"><b>Status</b></td><td align=\"left\"><b>Select</b></td></th><tr align=\"left\">"+targetRows+"</tr></table>";
document.getElementById('table-id').innerHtml = targetTable;
}