javascript - 对从 CSV 表生成的 HTML 表进行排序

标签 javascript php html mysql csv

您好,我正在尝试在从 CSV 文件生成的 HTML 表中创建排序功能。我添加了一些据说可以做到这一点的 JavaScript,但我并不是最擅长的。请指教。

这是我正在使用的代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HKJC Football</title>
<script type="text/javascript" src="http://cscasiapacific.com/tablesort/jquery-latest.js"> </script> 
<script type="text/javascript" src="http://cscasiapacific.com/tablesort/jquery.tablesorter.js"></script> 
<style type="text/css">
<!--
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-image: url('http://1080phdwallpapers.com/wp-content/uploads/2012/10/kick-the-ball-1080p-hd-wallpaper.jpg');
background-color: #FFFFFF;
margin: 0;
padding: 0;
color: #000;
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-   width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-  style:solid;border-width:1px;overflow:hidden;word-break:normal;}
 }
 table, th, td {
 border: 1px solid black;
}
table, th, td {
background-color: green;
color: white;
}
</style><!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--></head>
</head>
<?php
echo "<html><center><body><table>  
<thead>
<tr> 
</thead></tr><tbody>  \n\n";
$f = fopen("http://www.rittmayer.info/sports/home4/rittmaye/public_html/cscasiapacific/football.CSV",   "r");
while (($line = fgetcsv($f)) !== false) {
    echo "<tr>";
    foreach ($line as $cell) {
            echo "<td>" . htmlspecialchars($cell) . "</td>";
    }
    echo "</tr>\n";
}
fclose($f);
echo "\n
</tbody></table>
</body></center></html>";

谢谢!

最佳答案

您已经包含了 javascript 文件,但没有以任何方式使用它们。将其添加到您的 HTML 中。查找有关如何在插件主页上对表格进行排序的示例 javascript。

Tablesorter 要求您的表有一个 ID。 <table id="myTable">

然后是让 tableSorter 执行 tableSorter 插件代码所需的代码:

<script type="text/javascript">
$( document ).ready(function() {
 $("#myTable").tablesorter(); 
});
</script>

将其包装在 jQuery 的 .ready() 中方法是必要的,因为您需要等到 PHP 完成并且页面完全加载,否则 javascript 可能会过早触发。

关于javascript - 对从 CSV 表生成的 HTML 表进行排序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25716680/

相关文章:

javascript - 如何从 php 操作更新数据库数量

javascript - fullpage.js - 在移动设备上设置 responsiveWidth 和 scrollOverflow 中断页面

javascript - Flow - 子类型数组

php - 如何使用php mysql计算点击按钮的文件下载

php - 为什么当返回的行为 0 时 Wordpress $wpdb->query() 响应为 1

javascript - Ext.tip 中的强制高度和滚动条(Extjs 3.4)

javascript - 创建一个滑动图片库

javascript - 如何使用 Javascript 检测文本区域中的新空行?

javascript - 正则表达式 url 地址

javascript - 查找给定数字的最近平方数