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)可能不是一个好主意。不保证对象中属性的顺序，因此您可以在每一行上获得不同的顺序。您应该按照所需的顺序创建一个包含属性名称的数组，并循环遍历该数组以获取密钥。

Answer 2

你可以遵循这个逻辑。创建一个包含数据的页面，以及一个将调用此文件并在初始页面上更新区域的JavaScript代码。

在你的php页面（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>';

在您的第一页上：

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

和javascript代码：

<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')使用与<div id="content">
只有一个.innerHTML分配，或使用正确的等号（[...].innerHTML += 'append'）

Answer 3

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

使用javascript

3 个答案: