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.