从单独的HTML加载表

Question

说我有两个文件：

index.html
table.html

其中table.html保存我的表（例如以下内容）：

<table border="1" class="dataframe" id="my_table">
  <thead>
    <tr style="text-align: right;">
      <th>school</th>
      <th>county</th>
      <th>zipcode</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>XX</td>
      <td>YY</td>
      <td>ZZ</td>
    </tr>
    <tr>
      <td>XX</td>
      <td>YY</td>
      <td>ZZ</td>
    </tr>
  </tbody>
</table>

和index.html只是有datatables代码，例如

<html>
<head>
  <link rel="stylesheet" type="text/css" href="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
</head>
<body>

  <script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
  <script>
  $(function(){
    $("#my_table").dataTable();
  })
  </script>
</body>
</html>

上面的方法不起作用，因为index.html找不到引用my_table 。 我如何使其“嵌入”（或使其“意识到”） table.html ？

Answer 1

使用iframe在首页中呈现表格页：

主HTML

<!doctype html>
<html lang="en">
<head>

    <title></title>
</head>
<body>
    <iframe src="tablepage.html"></iframe>
</body>
</html>

表格页面HTML

<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" />
</head>
<body>
<table border="1" class="dataframe" id="my_table">
  <thead>
    <tr style="text-align: right;">
      <th>school</th>
      <th>county</th>
      <th>zipcode</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>XX</td>
      <td>YY</td>
      <td>ZZ</td>
    </tr>
    <tr>
      <td>XX</td>
      <td>YY</td>
      <td>ZZ</td>
    </tr>
  </tbody>
</table>
    <script type="text/javascript" src="jQuery.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
    <script src="theJS.js"></script>
    </body>
</html>

的JavaScript

$(document).ready(function () {
    $('#my_table').DataTable();

});

Answer 2

您可以使用load()函数插入HTML页面

 <script>
$(function(){
    $("#table").load("table.html"); 
});
 </script>

Index.html

<html>
<head>
  <link rel="stylesheet" type="text/css" href="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">  
  <script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
  <script>
      $(function(){
          $("#table").load("table.html"); 
      });
      $(function(){
          $("#my_table").dataTable();
      });
  </script>
</head>
<body>
    <div id="table"></div>
</body>
</html>

和table.html

<table border="1" class="dataframe" id="my_table">
  <thead>
    <tr style="text-align: right;">
      <th>school</th>
      <th>county</th>
      <th>zipcode</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>XX</td>
      <td>YY</td>
      <td>ZZ</td>
    </tr>
    <tr>
      <td>XX</td>
      <td>YY</td>
      <td>ZZ</td>
    </tr>
  </tbody>
</table>

Answer 3

您可以使用jQuery.get（）（请参见上一个示例）从服务器获取第二个文件，然后将HTML代码附加到当前页面中，然后就可以对其进行修改。

从单独的HTML加载表

问题描述

3 个解决方案

解决方案1
1 2015-09-03 01:07:04

解决方案2
1 2015-09-03 01:12:39

解决方案3
0 2015-09-03 01:12:17

从单独的HTML加载表

问题描述

3 个解决方案

解决方案1 1 2015-09-03 01:07:04

解决方案2 1 2015-09-03 01:12:39

解决方案3 0 2015-09-03 01:12:17

解决方案1
1 2015-09-03 01:07:04

解决方案2
1 2015-09-03 01:12:39

解决方案3
0 2015-09-03 01:12:17