jquery.tablesorter:テーブルタグをソート可能にするJs



テーブルの見出し(thタグ)をクリックすると、その要素(tdタグ)が
降順・昇順でソートされます。

1.CSSの記述例

以下は任意です。

<style type="text/css">
<!--
body {
	margin: 0px;
	font-size:14px;
}
h1{
	font-size:16px;
	font-weight:normal;
	line-height:1.4em;
	text-align:center;
	padding:15px 0 10px 0;
}
#idWrap{
	width:700px;
	margin:0 auto;
}
table{
	border:solid 1px #333333;
}
th{
	background-color:#333333;
	color:#FFFFFF;
	border-bottom:solid 1px #333333;
	cursor:pointer;
}
th:hover{
	background-color:#FFFFFF;
	color:#333333;
	border-bottom:solid 1px #333333; 
}
th, td{
	padding:10px;
	font-weight:normal;
}
-->
</style>

2.JavaScriptの記述例

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="jquery.tablesorter.js"></script>
<script type="text/javascript">
$(function(){
	$('#myTable').tablesorter();
});
</script>

3.HTMLの記述例

<table id="myTable" cellpadding="0" cellspacing="0"> 
<thead> 
<tr>
    <th>Name</th>
    <th>Category</th>
    <th>URL</th>
</tr>
</thead> 
<tbody> 
<tr>
    <td>Blinderhiddencss</td>
    <td>CSS</td>
    <td><a href="http://www.blinderhidden.com/category/css" title="CSS | BLINDER HIDDEN" target="_blank">http://www.blinderhidden.com/category/css</a></td>
</tr> 
<tr>
    <td>Blinderhiddenfacebook</td>
    <td>Facebook</td>
    <td><a href="http://www.blinderhidden.com/category/facebook" title="Facebook | BLINDER HIDDEN" target="_blank">http://www.blinderhidden.com/category/facebook</a></td>
</tr> 
<tr>
    <td>Blinderhiddenhtml5</td>
    <td>HTML5</td>
    <td><a href="http://www.blinderhidden.com/category/html5" title="HTML5 | BLINDER HIDDEN" target="_blank">http://www.blinderhidden.com/category/html5</a></td>
</tr> 
<tr>
    <td>Blinderhiddenjavascript</td>
    <td>JavaScript</td>
    <td><a href="http://www.blinderhidden.com/category/javascript" title="JavaScript | BLINDER HIDDEN" target="_blank">http://www.blinderhidden.com/category/javascript</a></td>
</tr>
<tr>
    <td>Blinderhiddenphp</td> 
    <td>PHP</td> 
    <td><a href="http://www.blinderhidden.com/category/php" title="PHP | BLINDER HIDDEN" target="_blank">http://www.blinderhidden.com/category/php</a></td>
</tr>
<tr>
    <td>Blinderhiddenseo</td> 
    <td>SEO</td> 
    <td><a href="http://www.blinderhidden.com/category/seo" title="SEO | BLINDER HIDDEN" target="_blank">http://www.blinderhidden.com/category/seo</a></td>
</tr>
<tr>
    <td>Blinderhiddenwordpress</td> 
    <td>WordPress</td> 
    <td><a href="http://www.blinderhidden.com/category/wordpress" title="WordPress | BLINDER HIDDEN" target="_blank">http://www.blinderhidden.com/category/wordpress</a></td>
</tr>
<tr>
    <td>Blinderhiddenwordetc</td> 
    <td>etc</td> 
    <td><a href="http://www.blinderhidden.com/category/sonohoka" title="その他 | BLINDER HIDDEN" target="_blank">http://www.blinderhidden.com/category/sonohoka</a></td>
</tr>
<tr>
    <td>Blinderhiddenwordetc</td> 
    <td>smartphone</td> 
    <td><a href="http://www.blinderhidden.com/category/smartphone" title="スマートフォン | BLINDER HIDDEN" target="_blank">http://www.blinderhidden.com/category/smartphone</a></td>
</tr>
</tbody>
</table>

テーブルタグをソート可能にするデモ

ソース元:Tablesorter 2.0

対応ブラウザはIE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+の様です。Chromeでも大丈夫そうです。

余談ですが昔はよく「テーブルは使わないでコーディングして下さい。」って言われてた気がしますが、
最近はあまり聞かなくなった様に思います。