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

Posted 2023-05-07

【中文标题】如何拉取javascript函数创建的元素的innerHTML

【英文标题】：How pull innerHTML of element created by javascript function

【发布时间】：2018-02-22 00:54:11

【问题描述】：

问题：

我有一个 id 为“tableholder”的 div 元素，它纯粹用于保存通过 ajax 从 php 文件中提取数据的 javascript 函数的输出。

在 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 数据？

【问题讨论】：

document.getElementById('tableholder') 记录时显示什么？

我现在正在对此进行调查，但我刚刚发现了一件事：您正在每个表格行中打开一个新的<tbody>。

如果我这样做 console.log(document.getElementById('tableholder'));然后我可以看到包括 innerHTML 在内的整个 tableholder 元素。但是，我不能对 tableholder 的子元素做同样的事情。另外 - 我没有注意到 的东西，但是当通过 php 直接移植到页面时它可以工作，所以我怀疑这是问题的根本原因。 我知道发生了什么； ajax 调用是异步的，这意味着事情并没有按照你认为的顺序发生。

【参考方案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> 行移到循环之外。

【讨论】：

我还移动了 标记，并为每个 while 循环创建了一个新行，正如您所提到的。答案很有效！ 对，您在表格的头部和主体中都缺少<tr> ... </tr>。很高兴它正在工作:)