| [サイトマップへ] |
前準備として http://tablesorter.com/docs/ から tablesorter をダウンロードしておく
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; initial-scale=1.0; charset=Shift_JIS" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="MSThemeCompatible" CONTENT="yes" />
<title>
Table Sorter
</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.22/themes/base/jquery.ui.all.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.22/jquery-ui.min.js"></script>
<link rel="stylesheet" href="themes/blue/style.css" />
<script type="text/javascript" src="jquery.tablesorter.js"></script>
<script type="text/javascript" src="jquery.metadata.js"></script>
<script type="text/javascript">
<!--
jQuery( function() {
$("#sortable01").tablesorter();
});
//-->
</script>
</head>
<body>
<table id="sortable01" class="tablesorter">
<thead>
<tr>
<th>id</th>
<th>商品名</th>
<th>価格</th>
<th>在庫量</th>
<th>合計</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>りんご</td>
<td>150</td>
<td>15</td>
<td>2250</td>
</tr>
<tr>
<td>2</td>
<td>みかん</td>
<td>30</td>
<td>60</td>
<td>1800</td>
</tr>
<tr>
<td>3</td>
<td>バナナ</td>
<td>180</td>
<td>30</td>
<td>5400</td>
</tr>
<tr>
<td>4</td>
<td>いちご</td>
<td>400</td>
<td>10</td>
<td>4000</td>
</tr>
</tbody>
</table>
</body>
</html>
実行結果の例
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; initial-scale=1.0; charset=Shift_JIS" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="MSThemeCompatible" CONTENT="yes" />
<title>
Table Sorter
</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.22/themes/base/jquery.ui.all.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.22/jquery-ui.min.js"></script>
<link rel="stylesheet" href="themes/blue/style.css" />
<script type="text/javascript" src="jquery.tablesorter.js"></script>
<script type="text/javascript" src="jquery.metadata.js"></script>
<script type="text/javascript">
<!--
jQuery( function() {
$("#sortable01").tablesorter();
$("table tr:first-child").addClass("first-child");
$("table tr:last-child").addClass("last-child");
$("table tr:nth-child(even)").addClass("even");
$("table tr:nth-child(odd)").addClass("odd");
$("tr:nth-child(odd)").addClass("odd").mouseover(function(){ $(this).addClass("hover") }).mouseout(function(){ $(this).removeClass("hover") });
$("tr:nth-child(even)").addClass("even").mouseover(function(){ $(this).addClass("hover") }).mouseout(function(){ $(this).removeClass("hover") });
});
//-->
</script>
<style>
table tr:first-child {
background-color: #808080;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
table tr:nth-child(odd) {
background-color: #d0d0e0;
}
table .hover {
font-size: x-large;
}
</style>
</head>
<body>
<table id="sortable01" class="tablesorter">
<thead>
<tr>
<th>id</th>
<th>商品名</th>
<th>価格</th>
<th>在庫量</th>
<th>合計</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>りんご</td>
<td>150</td>
<td>15</td>
<td>2250</td>
</tr>
<tr>
<td>2</td>
<td>みかん</td>
<td>30</td>
<td>60</td>
<td>1800</td>
</tr>
<tr>
<td>3</td>
<td>バナナ</td>
<td>180</td>
<td>30</td>
<td>5400</td>
</tr>
<tr>
<td>4</td>
<td>いちご</td>
<td>400</td>
<td>10</td>
<td>4000</td>
</tr>
</tbody>
</table>
</body>
</html>
実行結果の例
