Javascript 获取数据后如何加载表

我目前正在开发一个web应用程序，我正在通过ajax请求获取大量数据，通过body上的onload事件触发它。我的表在检索数据时需要jquery和其他CSS文件作为UI文件，当我尝试将数据附加到表中时，样式和其他功能（jquery）不适用于新数据，我无法刷新整个页面，因为它会发出另一个ajax调用。因此，是否有一种方法可以在收到数据后重新加载（刷新）该特定表，或者阻止该表在收到数据后再加载。

有多种解决方案，可能并非所有解决方案都适用于每个设置。具体来说，如果您使用MVVM框架，如Angular、Vue或类似的框架，您应该能够利用它们的组件来完成这项工作。既然您没有提到这样的框架，我假设您想要一个普通的JS解决方案

一种可能是创建一个空表，并在ajax调用的回调中手动构建缺少的HTML：

<table id="foo"></table>

<script>
    const callback = (results) => {
        const table = document.getElementById("foo");
        let innerHTML = "";
        results.forEach((result) => {
            innerHTML += `<tr><td>${result.column1}</td>` +
                         `<td>${result.column2}</td></tr>`;
        });
        table.innerHTML = innerHTML;
    };
</script>

常量回调=（结果）=>{
const table=document.getElementById（“foo”）；
让innerHTML=“”；
results.forEach（（结果）=>{
innerHTML+=`${result.column1}`+
`${result.column2}`；
});
table.innerHTML=innerHTML；
};

<>你也可以考虑使用。在ajax调用的回调中，您可以处理数据以填充模板，然后根据需要将任意多的行追加到表中：

<table id="foo"></table>
<template id="bar">
    <tr>
        <td></td>
        <td></td>
    </tr>
</template>

<script>
    const callback = (results) => {
        const table = document.getElementById("foo");
        const rowTemplate = document.getElementById("bar");
        results.forEach(result => {
            const cells = rowTemplate.content.querySelectorAll("td");
            cells[0].textContent = result.column1;
            cells[1].textContent = result.column2;

            table.appendChild(document.importNode(rowTemplate.content, true));
        });
    };
</script>

常量回调=（结果）=>{
const table=document.getElementById（“foo”）；
const rowTemplate=document.getElementById（“bar”）；
results.forEach（result=>{
const cells=rowTemplate.content.querySelectorAll（“td”）；
单元格[0]。textContent=result.column1；
单元格[1]。textContent=result.column2；
table.appendChild（document.importNode（rowTemplate.content，true））；
});
};

更有趣的利用模板的方法可能是使用模板引擎。下面是一个使用Nunjuck的示例：

<table id="foo"></table>
<template id="bar">
    {% for result in results %}
    <tr>
        <td>{{result.column1}}</td>
        <td>{{result.column2}}</td>
    </tr>
    {% endfor %}
</template>

<script>
    const callback = (results) => {
        const table = document.getElementById("foo");
        const templateHTML = document.getElementById("bar").innerHTML;
        const rowTemplate = nunjucks.compile(templateHTML);

        table.innerHTML = rowTemplate.render({results});
    };
</script>

{结果中的结果为%}
{{result.column1}
{{result.column2}
{%endfor%}
常量回调=（结果）=>{
const table=document.getElementById（“foo”）；
const templateHTML=document.getElementById（“bar”）.innerHTML；
const rowTemplate=nunjucks.compile（templateHTML）；
table.innerHTML=rowTemplate.render（{results}）；
};

最后，如果您可以控制ajax调用返回的数据，那么也可以采用老式的方式，只返回HTML而不是JSON数组

至于CSS样式，您需要确保CSS规则的编写方式将应用于生成的代码。它们将自动使用，无需重新加载页面

---

如果需要对表行执行进一步的操作，即添加事件侦听器，最好只在table元素上设置它们，然后检查事件目标。通过这种方式，您无需删除或重新添加任何事件侦听器即可操作表内容。

您能告诉我们如何将数据附加到表中吗？请发布相关代码您可以执行一些类似Facebook的功能，只上载数据的第一部分，当最终用户使用滚动条时，继续加载数据，而不是在oneHi Tony中加载所有数据谢谢你的建议，但我不能真正使用它，我的要求是在加载表之前必须提供完整的数据。CSS在第一次加载页面时应用于页面中的元素，之后由脚本添加的元素也是如此。您确定正在注入的HTML与CSS中的选择器匹配吗？