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>

以上操作不起作用，因为my_table找不到引用index.html。我怎样才能“嵌入”（或让它“意识到”）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 个答案: