2019-05-11 JavaScript, jQuery

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="https://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>No</th>


<th>Category</th>


<th>URL</th>

</tr>

</thead>


<tbody>

<tr>

<td>1</td>


<td>css</td>


<td><a href="https://dad-union.com/category/css" target="_blank">https://dad-union.com/category/css</a></td>

</tr>


<tr>

<td>2</td>


<td>JavaScript</td>


<td><a href="https://dad-union.com/category/javascript" target="_blank">https://dad-union.com/category/javascript</a></td>

</tr>


<tr>

<td>3</td>


<td>jQuery</td>


<td><a href="https://dad-union.com/category/jquery" target="_blank">https://dad-union.com/category/jquery</a></td>

</tr>


<tr>

<td>4</td>


<td>PHP</td>


<td><a href="https://dad-union.com/category/php" target="_blank">https://dad-union.com/category/php</a></td>

</tr>

</tbody>

</table>

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

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