更新
我现在在加载函数中拥有了所有内容，正如答案中所建议的那样，但出现了不同的错误:
TypeError: table.column is not a function
<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>
This report is updated every three minutes. The last update took place at $TIMESTAMP_UPDATE$.<br/>
<div id="colvis" width="100%"></div>
<table id="main_table"></table>
<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>
$(document).ready(function() {
var table = $('#main_table');
table.load("latest_flight.html", function() {
table.DataTable( {
"paging": true
});
$("#main_table thead th").each( function ( i ) {
var name = table.column( i ).header();
var spanelt = document.createElement( "button" );
spanelt.innerHTML = name.innerHTML;
$(spanelt).addClass("colvistoggle");
$(spanelt).attr("colidx",i); // store the column idx on the button
$(spanelt).on( 'click', function (e) {
e.preventDefault();
// Get the column API object
var column = table.column( $(this).attr('colidx') );
// Toggle the visibility
column.visible( ! column.visible() );
});
$("#colvis").append($(spanelt));
});
});
});
</script>
</body>
</html>
原始问题:
考虑以下简单的 HTML 文件。我无法迭代从单独文件加载的表的标题。为什么？
<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>
<div id="colvis"></div>
<table id="main_table"></table>
<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>
$(document).ready(function() {
var table = $('#main_table');
table.load("file_with_table.html", function() {
table.DataTable( {
"paging": true
});
});
// ============================================================================
// THE FOLLOWING FAILS, #head DOES NOT HOLD thead's, is it because it's a div?
// ============================================================================
// For each column in header add a togglevis button in the div
$("#table thead th").each( function ( i ) {
var name = table.column( i ).header();
var spanelt = document.createElement( "button" );
spanelt.innerHTML = name.innerHTML;
$(spanelt).addClass("colvistoggle");
$(spanelt).attr("colidx",i); // store the column idx on the button
$(spanelt).on( 'click', function (e) {
e.preventDefault();
// Get the column API object
var column = table.column( $(this).attr('colidx') );
// Toggle the visibility
column.visible( ! column.visible() );
});
$("#colvis").append($(spanelt));
});
});
</script>
</body>
</html>
其中file_with_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>
最佳答案
这是因为加载是异步的，请将each语句移至加载请求的回调函数内。
table.load("file_with_table.html", function() {
table.DataTable( {
"paging": true
});
$("#my_table thead th").each( function ( i ) {
var name = table.column( i ).header();
var spanelt = document.createElement( "button" );
spanelt.innerHTML = name.innerHTML;
$(spanelt).addClass("colvistoggle");
$(spanelt).attr("colidx",i); // store the column idx on the button
$(spanelt).on( 'click', function (e) {
e.preventDefault();
// Get the column API object
var column = table.column( $(this).attr('colidx') );
// Toggle the visibility
column.visible( ! column.visible() );
});
$("#colvis").append($(spanelt));
});
});
关于javascript - 访问从另一个文件加载的 id，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32387565/