对从CSV表生成的HTML表进行排序
Sorting HTML Table that is generated from CSV table
嗨,我正试图在从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。
桌上分拣机要求您的桌子有一个ID。<table id="myTable">
然后,让tableSorter执行tableSorter插件代码所需的代码:
<script type="text/javascript">
$( document ).ready(function() {
$("#myTable").tablesorter();
});
</script>
将其封装在jQuery的.ready()
方法中是必要的,因为您需要等到PHP完成并完全加载页面,否则javascript可能会过早启动。
相关文章:
- 使用html和Javascript进行客户端排序
- 使用Handontable在同一列中用纯文本和html对问题进行排序
- 如何移动/重新排序html表行
- 使用javascript/JQM对JSON对象进行排序并附加到html中
- 如何在javascript和/或jquery中对具有多列的HTML表进行排序
- 从 ajax 调用到 jquery UI 可排序列表构建 html
- 我可以用angularJS/Jquery / Javascript对静态html表进行排序吗?
- 功能性 HTML 表(排序、筛选、移动和切换列)
- 无法在jQuery上对我的html列表进行排序
- 如何使用Javascript对html内容进行排序(按作者排序,按日期排序等)
- 表过滤,排序,在html中使用jquery/javascript/css进行区分记录
- 排序 Jquery 返回的 HTML 元素
- 如何创建可排序、可过滤和可编辑的 html/javascript 表
- 在 JavaScript 或 jQuery 中对 HTML 内容进行排序
- 对 html 表中.txt中的字符串进行排序
- 当通过 Struts 填充表时,如何实现 HTML 表排序
- 如何使用 html 选择元素的值对 Shopify 液体中的集合进行排序
- 使用 Tinysort 按子属性对 HTML 列表进行排序
- 对 HTML 列表进行排序,然后对目标元素进行排序
- 对具有多词输入的 HTML 元素进行排序