ラジオボタンでテーブルの内容をフィルタリングする
Result
jQuery
$(document).ready(function() {
$("table tr:even").addClass("even");
$("ul.list-sort input:radio").attr("checked","");
$("ul.list-sort input#line-all:radio").attr("checked","checked");
var $tgt = $("input.item");
$tgt.click(function(){
var $sortString = $(this).attr("id");
var $sortStringPath = $sortString.substring(5,7);
$("tr").removeClass("visible").addClass("none");
$("tr.sort-title").removeClass("none");
var $sort_tgt = "tr.tgt-" + $sortStringPath;
$($sort_tgt).removeClass("none").addClass("visible");
if($sortString == "line-all"){
$("tr").removeClass("none");
}
$("table tr").removeClass("even");
$("table tr:visible:even").addClass("even");
});
|
css
table{
width:400px;
border-collapse:collapse;
border-bottom:1px solid #ccc;
}
table th,
table td{
width:25%;
padding:5px 0;
margin:0;
text-align:center;
border:1px solid #ccc;
}
table tr.none,
table tr.none td{
visibility:hidden;
display:none;
}
table tr.visible,
table tr.visible td{
visibility:visible;
}
table tr.even td{
background:#efefef;
}
table th{
width:25%;
background:#efefef;
}
ul{
list-style:none;
overflow:hidden;
zoom:1;
}
ul li{
float:left;
padding:10px;}
|
html
<ul class="list-sort">
<li><label for="line-all"><input type="radio" id="line-all" class="item" value="foo" name="select" />All</label></li>
<li><label for="line-01"><input type="radio" id="line-01" class="item" value="foo" name="select" />foo</label></li>
<li><label for="line-02"><input type="radio" id="line-02" class="item" value="bar" name="select" />bar</label></li>
<li><label for="line-03"><input type="radio" id="line-03" class="item" value="hoge" name="select" />hoge</label></li>
</ul>
<table cellpadding="0" cellspacing="0" border="0">
<col width="25%" />
<col width="25%" />
<col width="25%" />
<col width="25%" />
<tbody>
<tr class="sort-title">
<th>Title1</th><th>Title2</th><th>Title3</th><th>Title4</th>
</tr>
<tr class="tgt-01">
<td>foo</td><td>foo</td><td>foo</td><td>foo</td>
</tr>
<tr class="tgt-02">
<td>bar</td><td>bar</td><td>bar</td><td>bar</td>
</tr>
<tr class="tgt-01">
<td>foo</td><td>foo</td><td>foo</td><td>foo</td>
</tr>
<tr class="tgt-03"><td>hoge</td>
<td>hoge</td><td>hoge</td><td>hoge</td>
</tr>
</tbody>
</table>
|
via
jQueryでテーブルをラジオボタンでソート（プラグインなし） | 独学Webデザイナーの覚書
