javascript - 使用 javascript 创建 html 表格

Question

我想使用包含行信息的 javascript 对象创建一个 html 表。我是 javascript 新手，所以我很困惑如何将变量传递给 html。我有一个 data[] 对象，它将数据库查询结果的每一行作为一个对象。我想编写一个函数来获取这个 data[] 对象并从中创建一个表。我想出了如何在 php 中做到这一点，但我想在 javascript 和 html 中做到这一点

我希望表格看起来像这样:

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

到目前为止，我的函数中有这个:

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

将表构建为字符串，然后分配给 .innerHTML。此外，由于 data 是一个数组，因此您需要在迭代对象属性之前对其进行迭代。

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

实际上，使用for (var key in row)在这里可能不是一个好主意。对象中属性的顺序无法保证，因此每行可能会得到不同的顺序。您应该按照您想要的顺序创建一个包含属性名称的数组，然后循环遍历该数组以获取键。