javascript - 使用 jQuery tablesorter 和 javascript 表数组

标签 javascript jquery html arrays tablesorter

我正在尝试在页面加载时由 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/

相关文章:

javascript - 比较两个 jquery ui 自动完成组合框值?

javascript - 在 OpenLayers 中部分显示一层,部分显示另一层?

jquery - 在 Bootstrap 轮播中并排堆叠两个图像

html - 内容 block 位置问题

jquery - 之前的CSS,不同的内容

javascript - 将 Javascript 与 HTML 分开

javascript - 重置 GIF 动画并显示 :none on Chrome 的正确方法

javascript - 找不到变量 : MediaRecorder in safari

javascript - 动态加载图像仅适用于 Chrome

Javascript/jquery - 在另一个视频开始时暂停当前播放的视频(iframe)