将html表格导入html页面答案

【问题标题】：Import html table into html page将html表格导入html页面
【发布时间】：2015-06-25 17:10:11
【问题描述】：

我现在有一个功能齐全的 html 文件，其中包含很多内容，我想通过将表格存储在单独的文件中来提高可读性。表格数据大约3000行html。目前的结构是：

HTML：

<body>
    <!-- Lots of content -->

    <table>
        <!-- Lots of data -->
    </table>

    <!-- Other content -->

    <script>
        <!-- Set up as table as datatable (jQuery plug-in) -->
        <!-- Add dynamic formatting to table -->
    </script>
</body>

如何将<table>...</table> 替换为仅调用另一个包含所有数据的 html 文件，以便我仍然可以对表格执行所有 javascript 操作？

【问题讨论】：

为什么要使用不同的 html 文件，而不仅仅是包含数据的 json 文件？
我从未使用过 json - 我并不反对它，我只是没有意识到这是一种选择。
好的，很酷没问题。 JSON 最酷的地方是您可以使用 jquery 的 AJAX api 进行异步调用。 api.jquery.com/jquery.ajax
所以要使用 JSON，我会做类似 jQuery.ajax( "tableData.html [, settings ] ) 的事情吗？这会去哪里？在我的主页中的表格容器 div 内？
不，您必须创建一个json 文件。忘记html :)。如果我是你，我会暂时不考虑 json，改天再学习

标签： javascript jquery html datatables

【解决方案1】：

使用 jQuery，您可以使用 GET 命令执行此操作，然后在您希望表格结束的地方添加一个 div。

导入数据的代码如下所示：

    $.ajax(
    {url:"tabledata.html",
     dataType:"text"}).done(
     function(data){
        $('#id_of_div_to_append_to').html(data);
     });

另外，您需要添加一个 div 以在 HTML 中附加数据：

<body>
    <!-- Lots of content -->

    <div id = "id_of_div_to_append_to"></div>

    <!-- Other content -->

    <script>
        <!-- Set up as table as datatable (jQuery plug-in) -->
        <!-- Add dynamic formatting to table -->
    </script>
</body>

【讨论】：

我的主页面是index.html，里面包含一个表格容器div，有数据的页面是tableData.html。那么我会将您的代码放在 index.html 中吗？会是$.get("tableData.html", function(data) { $('#tableContainer').append(data); }) 吗？
@lg22woo 您的 tableData.html 在哪里？在与 index.html 相同的文件夹中？
@lg22woo 是的。代码应该放在 index.html 中。该代码假定您的数据文件与 index.html 位于同一文件夹中。试试看，让我知道会发生什么。
@Mikey 是的，它们在同一个文件夹中。
@userbd 没有显示。我有这个：<div id="tableContainer"> <script> $.get("tableData.html", function(data) { $('#tableContainer').append(data); }) </script> </div>

【解决方案2】：

这是我的问题的一个非常复杂的解决方案，但如果你有时间学习 Angular，我会推荐它：

https://www.codeschool.com/courses/shaping-up-with-angular-js

Angular 让我的 html 更具可读性和动态性。

【讨论】：