如何拉取javascript函数创建的元素的innerHTML

Question

问题：

我有一个id为“tableholder”的div元素，它纯粹是为了将输出保存在javascript函数上，该函数通过ajax从PHP文件中提取数据。

在tableholder元素中，是一个list.js表，如果我们只是包含他的php文件而不是通过ajax调用它并通过innerHTML =“”设置它。

如果动态创建了tableholder div的innerHTML，我如何使用它？

到目前为止

代码：

PHP文件名为：

    <?php

// Connection details for the database being called.
include 'connection.php';

// Putting the query to the database in a variable called "$assets".
$assets = "SELECT * FROM assetregister.getassets";
$assetPull = $conn->query($assets);
$output = "";

// Pulling all of the details from the database and displaying them on the page within the inidividual divs.
if ($assetPull->num_rows > 0) {
    $output .= "<div id='users'>";
    $output .= "<input class='search form-control mt-2' placeholder='Search...' />";
    $output .= "<div class='m-2'>";
    $output .= "<button class='sort btn' data-sort='model'>Sort By Model</button>";
    $output .= "<button class='sort btn ml-2' data-sort='domain'>Sort By Domain</button>";
    $output .= "<button class='sort btn ml-2' data-sort='location'>Sort By Location</button>";
    $output .= "</div>";
    $output .= "<table class='table table.hover list'>";
    $output .= "<thead>";
    $output .= "<th style='text-align: center;'>Model</th>";
    $output .= "<th style='text-align: center;'>Serial Number</th>";
    $output .= "<th style='text-align: center;'>Asset Number</th>";
    $output .= "<th style='text-align: center;'>Domain</th>";
    $output .= "<th style='text-align: center;'>Location</th>";
    $output .= "<th style='text-align: center;'>Type</th>";
    $output .= "</thead>";
    while ($row = $assetPull->fetch_assoc()) {
        $output .= "<tbody class='list' style='text-align: center;'>";
        $output .= "<td class='model'>" . $row['modelName'] . "</td>";
        $output .= "<td class='serialNumber'>" . $row['serialNumber'] . "</td>";
        $output .= "<td class='assetNumber'>" . $row['assetNumber'] . "</td>";
        $output .= "<td class='domain'>" . $row['domain'] . "</td>";
        $output .= "<td class='location'>" . $row['locationName'] . "</td>";
        $output .= "<td class='type'>" . $row['type'] . "</td>";
    }
    $output .= "</tbody>";
    $output .= "</table>";
    $output .= "</div>";
    // If there is no rows in the table that is being called then they will display 0 Results... See below.
} else {
    $output .= "0 results";
}

echo $output;

$conn->close();
?>

这有效：

<div class="container-fluid">
    <div class="container">
        <div class="row">
            <main class="col-12" style="margin-top: 80px;">
                <button class="btn btn-primary" onclick="assetSubmit()" style="width: 100%;">Add An Asset</button>
                <?php include 'scripts/getAsset.php'; ?>
            </main>
        </div>
    </div>
</div>
<script>
    populatetable('tableholder');
    window.onload = function () {
        var options = {
            valueNames: ['model', 'serialNumber', 'assetNumber', 'domain', 'location', 'type']
        };
        var userList = new List('users', options);
    };
</script>

这将输出表格，并且所有list.js函数都可以正常工作。

这不起作用：

<div class="container-fluid">
    <div class="container">
        <div class="row">
            <main class="col-12" style="margin-top: 80px;">
                <button class="btn btn-primary" onclick="assetSubmit()" style="width: 100%;">Add An Asset</button>
                <!-- Pulling in the results of the assets (most recent assets)  -->
                <div id="tableholder"></div>

                <!-- end -->
            </main>
        </div>
    </div>
</div>

<!-- PHP include for the footer -->
<?php include 'assets/layout/footer.php'; ?>

<!-- end -->

<script>
  populatetable('tableholder');
  window.onload = function (){
    var options = {
      valueNames: [ 'model', 'serialNumber', 'assetNumber', 'domain', 'location', 'type']
    };

    var userList = new List('users', options);

  };
function populatetable(name){

  $.ajax({
    url: "scripts/getAssets.php",
    success: function(data){
      document.getElementById(name).innerHTML = data;
    }
  })
}
</script>

我可以假设：

从我调试代码的各种console.log行和php echos中，看来问题是启动list.js表的javascript命令无法找到“用户”由populatetable（）函数中的document.getElementById(name).innerHTML = data;创建的表。我知道这一点，因为下面的内容显示空白：

console.log(document.getElementById(tableholder).innerHTML);

我做错了什么，或者是否无法提取动态创建的元素的innerHTML数据？

Answer 1

问题是，当你调用List()时，ajax调用还没有完成，因为它是异步的。

请改为尝试：

var options = {
    valueNames: ['model', 'serialNumber', 'assetNumber', 'domain', 'location', 'type']
};
var userList;

$(document).ready(function() {
    populatetable('#tableholder');
});

function populatetable(id) {
    $.ajax({
        url: "scripts/getAssets.php",
        success: function(data) {
            $(id).html(data);
            userList = new List('users', options);
        }
    });
}

这里我在任何地方使用jQuery都很有用，而且我只是在实际插入数据后才调用List()。

另请注意，就像我在评论中提到的那样，您需要将<tbody>行移到循环之外。