[jQuery] Show/hide table rows from Select needs trim
Basically what I have is a table with two columns: dates & report
names. Within the dates I have four separate views: Week, Month, Three
Months (default selected) and Six Months (hidden). The select shows/
hides the table rows based on their view, showing all the reports up
until the selected view.
I have to add the show/hide class to the Six Month td's as well
because FF2.x has a bug that messes up the td's in hidden rows once
they're shown. I'll work on finding resolution to that separately.
I have the function working, but as you'll see, it's kind of a beast.
My thinking was that I should be able to filter based on an array vs.
multiple if statements. If anyone could help me refactor the code, or
show me a different approach, I'd appreciate it.
Thanks.
$(document).ready(function(){
$("#myTable tbody tr").addClass("group");
$(".3").hide();
});
$(document).ready(function(){
$("select").change(function(){
$(".group, tbody td").hide().filter("."+$
(this).val()).show();
$("."+$(this).val()).parent().show();
if($(this).val() == '3'){
$("tbody tr, tbody td").show();
}
else if($(this).val() == '2'){
$("tbody td.1, tbody td.0").show();
$("tbody td.1, tbody td.0").parent().show();
}
else if($(this).val() == '1'){
$("tbody td.0").show();
$("tbody td.0").parent().show();
}
});
});
<select class="periods">
<option value="0">Past week</option>
<option value="1">Past month</option>
<option value="2" selected="selected">Past 3 months</option>
<option value="3">Past 6 months</option>
</select>
<table border="0" cellspacing="5" cellpadding="5" id="myTable">
<thead>
<tr><th>date</th><th>name</th></tr>
</thead>
<tbody>
<tr><td class="0">13-12-2007</td><td class="0">Report 8</td></tr>
<tr><td class="0">12-12-2007</td><td class="0">Report 7</td></tr>
<tr><td class="1">14-11-2007</td><td class="1">Report 6</td></tr>
<tr><td class="1">08-11-2007</td><td class="1">Report 5</td></tr>
<tr><td class="2">05-10-2007</td><td class="2">Report 4</td></tr>
<tr><td class="2">02-10-2007</td><td class="2">Report 3</td></tr>
<tr class="3"><td class="3">05-07-2007</td><td class="3">Report 2</
td></tr>
<tr class="3"><td class="3">02-07-2007</td><td class="3">Report 1</
td></tr>
</tbody>
</table>