我正在尝试在页面加载时由 javascript 数组生成的 html 表上使用 jQuery 插件 tablesorter (tablesorter.com)。表格被设置样式,点击列标题时表格不会排序。
这是我到目前为止所拥有的:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/lib/jquery-ui/jquery-ui-1.11.4/external/jquery/jquery.js"></script>
<script type="text/javascript" src="/lib/jquery-ui/jquery-ui-1.11.4/jquery-ui.js"></script>
<link type="text/css" rel="stylesheet" href="/lib/jquery-ui/jquery-ui-1.11.4/jquery-ui.css">
<script type="text/javascript" src="/lib/jquery/tablesorter/jquery.tablesorter.js"></script>
<link type="text/css" rel="stylesheet" href="/lib/jquery/tablesorter/themes/blue/style.css">
<style>
</style>
<script>
$( document ).ready( function() {
$( "table" ).tablesorter();
$( "p" ).click( function() {
$( this ).hide();
});
});
$( function() {
$( "#datepicker" ).datepicker();
});
</script>
<script>
var frameData = [
["Phoenix Smasher", 15],
["Bone Breaker", 16],
["DeathFist", 60],
["Thruster", 20],
["S Jab", 10]
];
function pageLoad() {
var t = "";
t += "<thead>";
t += "<tr>";
t += "<th>Move</th>";
t += "<th>Start Up</th>";
t += "</tr>";
t += "</thead>";
t += "<tbody>";
for (var i = 0; i < frameData.length; i++) {
t += "<tr>";
t += "<td>" + frameData[i][0] + "</td><td>" + frameData[i][1] + "</td>";
t += "</tr>";
}
t += "</tbody>";
document.getElementById("frameTable").innerHTML = t;
}
</script>
</head>
<body onload="pageLoad()">
<p>Click the table headers to sort the array in descending order.</p>
<br />
<br />
<div id="demo"></div>
<table id="frameTable" class="tablesorter">
</table>
<p>jQuery test. This text will disappear on click.</p>
<input type="text" id="datepicker">
</body>
</html>
我尝试过的:奇怪的是,当我摆脱 javascript 数组并将实际的 html 表数据放在 <table>
之间时和</table>
标签,tablesorter 插件工作正常。另外,我尝试重新排列数组和 pageLoad()
函数与 jQuery 代码,完全没有运气。
知道如何让它发挥作用吗?
该页面位于我的服务器上:http://sketchcarellz.com/multiArray.html
最佳答案
您的问题是您在构建表格之前初始化插件。
切换执行顺序。为此,只需使用一个加载处理程序即可确保您知道排序
$( document ).ready( function() {
pageload();
// table is build, call plugin
$( "table" ).tablesorter();
});
关于javascript - 使用 jQuery tablesorter 和 javascript 表数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30143761/