使用javascript创建html表

Question

I want to create an html table using a javascript object that has my row information. I am new to javascript so I'm confused how I can pass variables to the html. I have a data[] object that has each row of the result of a database query as an object. I want to write a function that will take this data[] object and create a table from it. I figured out how i would do it in php but i want to do it in javascript and html

I want the table to look like this:

<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>';

    // 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>';

I have this in my function so far:

function showTickets(httpRequest){
            if (httpRequest.readyState == 4) {
                if (httpRequest.status == 200){
                   alert("hi there");
                   var data = JSON.parse(httpRequest.responseText);
                   console.log(data);

                }
                else{
                    alert('Problem with request'); 
                }
            }
        }

    function createTable(data){
        document.getElementById("table").innerHTML = "<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>";
for(var key in data){
                if (!data.hasOwnProperty(key)) continue;
                var row = data[key];
                document.getElementById("table").innerHTML = "<tr><td align=\"left\">";
                //now i want to do something to add a value from row[""] but in html

            }

    }

Answer 1

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.