hide conditional tags on click
My html looks like this:
Monday, tuesday, wednesday, thursday friday saturday sunday
<a href="#Monday" id="ABC-1">Monday/a>
like that for all...
and its displaying information related to all of them
<table>
<tr id="Day-1">
<td></td>
</tr>
<tr class="odd">
<td></td>
</tr>
<tr class="even">
<td></td>
</tr>
<tr id="Day-2">
<td></td>
</tr>
<tr class="even">
<td></td>
</tr>
<tr class="odd">
<td></td>
</tr>
<tr class="even">
<td></td>
</tr>
<tr id="Day-3">
<td></td>
</tr>
<tr class="odd">
<td></td>
</tr>
<tr id="Day-4">
.......
nd so on..
I want that when I click Monday it should hide all the tr tags except..
<tr id="Day-1">
<td></td>
</tr>
<tr class="odd">
<td></td>
</tr>
<tr class="even">
<td></td>
</tr>
(tr tags before next tr id="Day-2">)
and similarly when I click tuesday it should display tr id="Day-2" nd tr tags without id and hide rest of it.
Note: you can treat id="Day-1" is for Monday and id="Day-2 is for Tuesday and like that Day-5 is for Frid开发者_运维问答ay...
so when I am clicking Friday I want to display id=Day-5 and few tr tags below it...
<tr id="Day-5>
<tr class="Even">
<tr class="even">
<tr class="odd">
<tr class="even">
Can do something like the following...
Not sure the logic behind ABC-1
in the day link vs Day-1
in the table rows, but the this will compensate for that.
I'm looping the rows each time one of the day's is clicked. When the loop gets to the correct day a flag is set to show the next set of odd/even rows until it comes to the next row with "Day" in the ID.
example jsfiddle
var $rows = $('table tr');
$('#days a').click(function() {
var $that = $(this);
var id = $that.attr('id').replace('ABC', 'Day');
var isEvenOdds = false;
$rows.each(function() {
var $that = $(this);
if ($that.attr('id') === id) {
$that.show();
isEvenOdds = true;
} else {
if ($that.attr('id') && $that.attr('id').indexOf('Day') > -1 && isEvenOdds) {
isEvenOdds = false;
}
if (!isEvenOdds) {
$that.hide();
} else {
$that.show();
}
}
});
});
Ok, your code is a bit weirdly marked up, but assuming I am reading your question correctly, something along these lines would work:
HTML:
<table>
<tr class="mon">
<td></td>
</tr>
<tr class="tues">
<td></td>
</tr>
</table>
<a href="#mon" rel="mon" class="showdates">Monday</a>
JS/jQuery:
$('a.showdates').click(function(e){
e.preventDefault();
var day = $(this).attr('rel');
$('tr').hide().
$('tr.'+day').show();
});
I haven't tested this, so you may need to adjust, but the basic concept is this: assign a class to the elements that need to be shown/hidden. In my example, it's the <tr>
tag, but maybe it's <td>
or <div>
in your case.
On click, hide all of those tags, then show only those tags with the appropriate class, which is stored as an attribute in the clicked element.
精彩评论