Highlight combination of cells with onclick of radio button

Question

jonsan32 12 Junior Poster in Training

9 Years Ago

This seems simple enough, but I can't find how to do this anywhere on any forum.

I have a table of cells that have a schedule of classes. There are 8 buttons above the table that when pressed I want the cells to highlight in a corresponding fashion. For instance, when the "HS Boys" button is pressed, I'd like for the 2 cells that say [HSB], the 2 cells that say [HSB & MSB], the one cell that says [All Boys] and the one cell that says [All Teams] to all highlight with a black background and yellow text while the other cells all dim to a gray background with white text.

If anyone can help, I'd be extremely grateful. Thank you.

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
  <script>
  $(function() {
    $( "#radiox" ).buttonset();
  });
  </script>


<style type="text/css">

body {
    font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
    font-size: 62.5%;
}

.time{
    color: #cccccc; 
        font-size:10px;
        float:left;
       font-family:arial;
}

.one {
background: #0000ff url(http://zurb.com/blog_uploads/0000/0617/alert-overlay.png) repeat-x; 
    display: inline-block; 
    padding: 1px 1px 1px 5px; 
        letter-spacing:2px;
    color: #ffffff; 
        font-size:12px;
        vertical-align:top;
        text-align:center;
        FONT-WEIGHT:300px;
    text-decoration: none;
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
    border-bottom: 1px solid rgba(0,0,0,0.25);
    position: relative;
    cursor: pointer;
        text-transform:uppercase;
        font-family:arial;

}

.two{
background: #990000 url(http://zurb.com/blog_uploads/0000/0617/alert-overlay.png) repeat-x; 
    display: inline-block; 
    padding: 1px 1px 1px 5px; 
        letter-spacing:2px;
    color: #ffffff; 
        font-size:12px;
        vertical-align:top;
        text-align:center;
        FONT-WEIGHT:300px;
    text-decoration: none;
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
    border-bottom: 1px solid rgba(0,0,0,0.25);
    position: relative;
    cursor: pointer;
        text-transform:uppercase;
        font-family:arial;
}

.three{
background: #333333 url(http://zurb.com/blog_uploads/0000/0617/alert-overlay.png) repeat-x; 
    display: inline-block; 
    padding: 1px 1px 1px 5px; 
        letter-spacing:2px;
    color: #ffffff; 
        font-size:12px;
        vertical-align:top;
        text-align:center;
        FONT-WEIGHT:300px;
    text-decoration: none;
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
    border-bottom: 1px solid rgba(0,0,0,0.25);
    position: relative;
    cursor: pointer;
        text-transform:uppercase;
        font-family:arial;
}


</style>



<form style="float:left; margin-top:30px;">
  <div id="radiox">
    <input type="radio" name="grade" id="1" value="1" checked/><label for="1" style="width:145px;">Entire Schedule</label>
    <input type="radio" name="grade" id="2" value="2" /><label for="2" style="width:120px;">HS Boys</label>
    <input type="radio" name="grade" id="3" value="3" /><label for="3" style="width:120px;">HS Girls</label>
    <input type="radio" name="grade" id="4" value="4" /><label for="4" style="width:120px;">MS Boys</label>
    <input type="radio" name="grade" id="5" value="5" /><label for="5" style="width:120px;">MS Girls</label>
    <input type="radio" name="grade" id="6" value="6" /><label for="6" style="width:120px;">Elem Boys</label>
    <input type="radio" name="grade" id="7" value="7" /><label for="7" style="width:120px;">Elem Girls</label>
    <input type="radio" name="grade" id="8" value="8" /><label for="8" style="width:120px;">Future Stars</label>
</div>
</form><br><br><br><br><br><br>

<table style="border:0px solid black;" cellpadding=0 cellspacing=0 width="1000">
<tr height="40" style="background:black;color:white; text-align:center; font-family:arial; font-size:12px;">
<td width="14%">SUNDAY</td>
<td width="14%">MONDAY</td>
<td width="14%">TUESDAY</td>
<td width="14%">WEDNESDAY</td>
<td width="14%">THURSDAY</td>
<td width="14%">FRIDAY</td>
<td width="14%">SATURDAY</td>
</tr>


<tr height="60">
<td class="three"><span class="time">8am</span><br><br>ALL TEAMS</td>
<td class="three"><span class="time">6pm</span><br><br>BOYS ONLY</td>
<td class="two"><span class="time">6pm</span><br><br>MSB</td>
<td class="two"><span class="time">6pm</span><br><br>MSG</td>
<td class="two"><span class="time">6pm</span><br><br>HSB</td>
<td class="three"><span class="time">6pm</span><br><br>GIRLS ONLY</td>
<td class="one"><span class="time">8am</span><br><br>ESB & ESG</td>
</tr>


<tr height="60">
<td class="one"><span class="time">9am</span><br><br>ESB @ ESG</td>
<td class="two"><span class="time">7pm</span><br><br>ESG</td>
<td class="two"><span class="time">7pm</span><br><br>HSB</td>
<td class="one"><span class="time">7pm</span><br><br>ESB & ESG</td>
<td class="two"><span class="time">7pm</span><br><br>MSG</td>
<td class="two"><span class="time">7pm</span><br><br>ESB</td>
<td class="one"><span class="time">9am</span><br><br>HSB & MSB</td>
</tr>


<tr height="60">
<td class="three"><span class="time">10am</span><br><br>FUTURE STARS</td>
<td class="one"><span class="time">8pm</span><br><br>HSG & MSG</td>
<td class="two"><span class="time">8pm</span><br><br>HSG</td>
<td class="two"><span class="time">8pm</span><br><br>MSB</td>
<td class="two"><span class="time">8pm</span><br><br>HSG</td>
<td class="one"><span class="time">8pm</span><br><br>HSB & MSB</td>
<td class="one"><span class="time">10am</span><br><br>HSG & MSG</td>
</tr>

</table>

javascript

4 Contributors
7 Replies
215 Views
8 Hours Discussion Span
Latest Post 9 Years Ago Latest Post by jonsan32

JorgeM 958 Problem Solver

9 Years Ago

The way I would go about this is assigning each of these cells (<td/>) an additional class. For example, you can have something like this...

<td class="two hsg"><span class="time">8pm</span><br><br>HSG</td>

Then, just use jQuery so that when you click the button, change the CSS properties of the cell.

For example...

$('#btnHSG').click(function(){
    $('.hsg').css("background-color", "yellow" );
});

Here is a sample...I used a button, but the "button" can be another type of element of your choosing.

<!DOCTYPE html>
<html>
<head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js'></script>
<style>
table { border: 1px solid black }
td { border: 1px solid black }
</style>
</head>
<body>
<button id="btnHSG">Click Me</button><br/><br/>
<table>
 <tr>
  <td class="groupA">Cell1</td><td class="groupB">Cell2</td>
 </tr>
 <tr>
  <td class="groupA">Cell3</td><td class="groupB">Cell4</td>
 </tr>
</table>

<script>
 $('#btnHSG').click(function(){
        $('.groupA').css("background-color", "yellow" );
 });
</script>
</body>
</html>

Edited 9 Years Ago by JorgeM

pixelsoul 272 Red Pill

9 Years Ago

With something like this, I would probably consider using html data attributes.

Example.

Input radio button has data-group="hsb" and then you use the same data attribute and value on the table sells to tie in the relationship. The data attribute also supports multiple values, so your table cell could have data-group="hsb hsg msb" and so on. This would also make it easier to understand when you are looking at your markup going forward, because you've given them some more meaningful identifiers. It would most likely make the jQuery a lot more streamlined as well.

After you have your radio buttons and table cells setup with data-group you could use some jQuery that you would never really need to touch later on like this.

$("#radiox input[type=radio]").on('click', function(){

    // get group name
    var group = $(this).data("group");

    // remove class from all cells
    $('#cal td').each(function(){
        $(this).removeClass('group-selected');
        $(this).removeClass('group-not-selected');
    });

    // stop if group was "all"
    if(group == "all"){
        return;
    }

    // add class for not selected groups
    $("#cal td").not('[data-group*="'+group+'"]').addClass("group-not-selected");

    // add class for selected groups
    $('#cal td[data-group*="'+group+'"]').each(function(){
        $(this).addClass("group-selected");
        console.log($(this).data());
    });

});

Now all you need is a class called .group-selected that you use to style your cells when they've been selected, and another class called .group-not-selected for the cells that have not been selected.

Here is an example http://jsfiddle.net/pixelsoul/z7fn9v0j/

You can look at the console when you click the radio buttons and it will show the groups it found.

Edited 9 Years Ago by pixelsoul

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

jonsan32 12 Junior Poster in Training · Answer 1 · 2015-01-27T22:10:46+00:00

This looks solid. Let me go try to integrate this, then I'll come back and mark it as solved. Thanks a ton!!!

jonsan32 12 Junior Poster in Training · Answer 2 · 2015-01-27T23:14:58+00:00

Seems to work, except I'm missing 4 things.

1) How can I also apply dark text with the yellow background for each.
2) Once a second or third, etc choice is made, I'd like for just that combination to be highlighted.
3) Is it possible to also dim each of the non-chosen cells?
4) How can I include a button that says "All Schedules" that shows the original background images of each cell?

Thanks a lot. You've got me well on my way. Here's where I am now.

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
  <script>
  $(function() {
    $( "#radiox" ).buttonset();
  });
  </script>
<style type="text/css">
body {
    font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
    font-size: 62.5%;
}
.time{
    color: #cccccc; 
        font-size:10px;
        float:left;
       font-family:arial;
}
.one {
background: #0000ff url(http://zurb.com/blog_uploads/0000/0617/alert-overlay.png) repeat-x; 
    display: inline-block; 
    padding: 1px 1px 1px 5px; 
        letter-spacing:2px;
    color: #ffffff; 
        font-size:12px;
        vertical-align:top;
        text-align:center;
        FONT-WEIGHT:300px;
    text-decoration: none;
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
    border-bottom: 1px solid rgba(0,0,0,0.25);
    position: relative;
    cursor: pointer;
        text-transform:uppercase;
        font-family:arial;
}
.two{
background: #990000 url(http://zurb.com/blog_uploads/0000/0617/alert-overlay.png) repeat-x; 
    display: inline-block; 
    padding: 1px 1px 1px 5px; 
        letter-spacing:2px;
    color: #ffffff; 
        font-size:12px;
        vertical-align:top;
        text-align:center;
        FONT-WEIGHT:300px;
    text-decoration: none;
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
    border-bottom: 1px solid rgba(0,0,0,0.25);
    position: relative;
    cursor: pointer;
        text-transform:uppercase;
        font-family:arial;
}
.three{
background: #333333 url(http://zurb.com/blog_uploads/0000/0617/alert-overlay.png) repeat-x; 
    display: inline-block; 
    padding: 1px 1px 1px 5px; 
        letter-spacing:2px;
    color: #ffffff; 
        font-size:12px;
        vertical-align:top;
        text-align:center;
        FONT-WEIGHT:300px;
    text-decoration: none;
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
    border-bottom: 1px solid rgba(0,0,0,0.25);
    position: relative;
    cursor: pointer;
        text-transform:uppercase;
        font-family:arial;
}
</style>
<form style="float:left; margin-top:30px;">
  <div id="radiox">
    <input type="radio" name="grade" id="btnHSB" value="2" /><label for="btnHSB" style="width:141px;">HS Boys</label>
    <input type="radio" name="grade" id="btnHSG" value="3" /><label for="btnHSG" style="width:141px;">HS Girls</label>
   <input type="radio" name="grade" id="btnMSB" value="4" /><label for="btnMSB" style="width:141px;">MS Boys</label>
    <input type="radio" name="grade" id="btnMSG" value="5" /><label for="btnMSG" style="width:141px;">MS Girls</label>
    <input type="radio" name="grade" id="btnESB" value="6" /><label for="btnESB" style="width:141px;">Elem Boys</label>
    <input type="radio" name="grade" id="btnESG" value="7" /><label for="btnESG" style="width:141px;">Elem Girls</label>
    <input type="radio" name="grade" id="btnFUTURE" value="8" /><label for="btnFUTURE" style="width:141px;">Future Stars</label>
</div>
</form><br><br><br><br><br><br>
<table style="border:0px solid black;" cellpadding=0 cellspacing=0 width="1000">
<tr height="40" style="background:black;color:white; text-align:center; font-family:arial; font-size:12px;">
<td width="14%">SUNDAY</td>
<td width="14%">MONDAY</td>
<td width="14%">TUESDAY</td>
<td width="14%">WEDNESDAY</td>
<td width="14%">THURSDAY</td>
<td width="14%">FRIDAY</td>
<td width="14%">SATURDAY</td>
</tr>
<tr height="60">
<td class="three group2 group3 group4 group5 group6 group7 group8"><span class="time">8am</span><br><br>ALL TEAMS</td>
<td class="three group2 group4 group6"><span class="time">6pm</span><br><br>BOYS ONLY</td>
<td class="two group4"><span class="time">6pm</span><br><br>MSB</td>
<td class="two group5"><span class="time">6pm</span><br><br>MSG</td>
<td class="two group2"><span class="time">6pm</span><br><br>HSB</td>
<td class="three group3 group5 group7"><span class="time">6pm</span><br><br>GIRLS ONLY</td>
<td class="one group6 group7"><span class="time">8am</span><br><br>ESB & ESG</td>
</tr>
<tr height="60">
<td class="one group6 group7"><span class="time">9am</span><br><br>ESB @ ESG</td>
<td class="two group7"><span class="time">7pm</span><br><br>ESG</td>
<td class="two group2"><span class="time">7pm</span><br><br>HSB</td>
<td class="one group6 group7"><span class="time">7pm</span><br><br>ESB & ESG</td>
<td class="two group5"><span class="time">7pm</span><br><br>MSG</td>
<td class="two group6"><span class="time">7pm</span><br><br>ESB</td>
<td class="one group2 group4"><span class="time">9am</span><br><br>HSB & MSB</td>
</tr>
<tr height="60">
<td class="three group8"><span class="time">10am</span><br><br>FUTURE STARS</td>
<td class="one group3 group5"><span class="time">8pm</span><br><br>HSG & MSG</td>
<td class="two group3"><span class="time">8pm</span><br><br>HSG</td>
<td class="two group4"><span class="time">8pm</span><br><br>MSB</td>
<td class="two group3"><span class="time">8pm</span><br><br>HSG</td>
<td class="one group2 group4"><span class="time">8pm</span><br><br>HSB & MSB</td>
<td class="one group3 group5"><span class="time">10am</span><br><br>HSG & MSG</td>
</tr>
</table>



<script>

 $('#btnHSB').click(function(){
        $('.group2').css("background-color", "yellow" );
 });
 $('#btnHSG').click(function(){
        $('.group3').css("background-color", "yellow" );
 });
 $('#btnMSB').click(function(){
        $('.group4').css("background-color", "yellow" );
 });
 $('#btnMSG').click(function(){
        $('.group5').css("background-color", "yellow" );
 });
 $('#btnESB').click(function(){
        $('.group6').css("background-color", "yellow" );
 });
 $('#btnESG').click(function(){
        $('.group7').css("background-color", "yellow" );
 });
 $('#btnFUTURE').click(function(){
        $('.group8').css("background-color", "yellow" );
 });
</script>

gentlemedia 803 Master Poster · Answer 3 · 2015-01-28T02:30:05+00:00

A click handler would highlight them once and forever and that's what you mean with point 2, right?. These are radio buttons which gets a checked state if checked, so you should use that to select your elements. With this if you check another radio button, the one that's checked gets unchecked, because you can only select one radio button at the time.
I would also add a class 'selected' and use that as a hook for your CSS in the stylesheet instead of adding it inline dynamically.

if($('#btnHSB').is(':checked')) {
    $('.group2').addClass('selected');
});

CSS:

td.selected {
    background-color: yellow;
    color: black;
    font-weight: bold;
}

Wiil look into the other points of you when I have time.

jonsan32 12 Junior Poster in Training · Answer 4 · 2015-01-28T05:22:26+00:00

I've noticed on your fiddle and on my website that the cells go straight down rather than situated into 3 rows. How can I fix this? The Table, TR's, and TD's all look like they're perfectly in place. I've duoble-checked all of my quotation marks. I'm using Chrome... Is that it?

Everything else works perfect. Thank you for taking so much to help me out.

jonsan32 12 Junior Poster in Training · Answer 5 · 2015-01-28T05:28:54+00:00

Figured it out. It was the display block. It worked in my html editor, but not on the site for some reason. Removing it was perfect. Thanks again. Marking this as solved. Heres' my final product. You guys rock!

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
  <script>
  $(function() {
    $( "#radiox" ).buttonset();
  });
  </script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>

<style type='text/css'>

.time{
    color: #cccccc; 
        font-size:10px;
        float:left;
       font-family:arial;
}
.one {
background: #0000ff url(http://zurb.com/blog_uploads/0000/0617/alert-overlay.png) repeat-x; 
    padding: 1px 1px 1px 5px; 
        letter-spacing:2px;
    color: #ffffff; 
        font-size:12px;
        vertical-align:top;
        text-align:center;
        FONT-WEIGHT:300px;
    text-decoration: none;
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
    border-bottom: 1px solid rgba(0,0,0,0.25);
    position: relative;
    cursor: pointer;
        text-transform:uppercase;
        font-family:arial;
}
.two{
background: #990000 url(http://zurb.com/blog_uploads/0000/0617/alert-overlay.png) repeat-x; 
    padding: 1px 1px 1px 5px; 
        letter-spacing:2px;
    color: #ffffff; 
        font-size:12px;
        vertical-align:top;
        text-align:center;
        FONT-WEIGHT:300px;
    text-decoration: none;
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
    border-bottom: 1px solid rgba(0,0,0,0.25);
    position: relative;
    cursor: pointer;
        text-transform:uppercase;
        font-family:arial;
}
.three{
background: #333333 url(http://zurb.com/blog_uploads/0000/0617/alert-overlay.png) repeat-x; 
    padding: 1px 1px 1px 5px; 
        letter-spacing:2px;
    color: #ffffff; 
        font-size:12px;
        vertical-align:top;
        text-align:center;
        FONT-WEIGHT:300px;
    text-decoration: none;
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
    border-bottom: 1px solid rgba(0,0,0,0.25);
    position: relative;
    cursor: pointer;
        text-transform:uppercase;
        font-family:arial;
}

#cal td{
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */   
}
.group-selected{
    background:yellow !important;
    color:#000 !important;
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}

.group-not-selected{
    opacity: 0.6 !important;
    filter: alpha(opacity=60) !important; /* For IE8 and earlier */
}
</style>



<form style="float:left; margin-top:30px;">
  <div id="radiox" style="font-family: Trebuchet MS, Helvetica, Arial, Verdana, sans-serif; font-size: 75%;">
        <input type="radio" name="grade" id="btnALL" data-group="all" value="9" /><label for="btnALL" style="width:125px;">Full Schedule</label>
    <input type="radio" name="grade" id="btnHSB" data-group="hsb" value="2" /><label for="btnHSB" style="width:110px;">HS Boys</label>
    <input type="radio" name="grade" id="btnHSG" data-group="hsg" value="3" /><label for="btnHSG" style="width:110px;">HS Girls</label>
   <input type="radio" name="grade" id="btnMSB" data-group="msb" value="4" /><label for="btnMSB" style="width:110px;">MS Boys</label>
    <input type="radio" name="grade" id="btnMSG" data-group="msg" value="5" /><label for="btnMSG" style="width:110px;">MS Girls</label>
    <input type="radio" name="grade" id="btnESB" data-group="esb" value="6" /><label for="btnESB" style="width:110px;">Elem Boys</label>
    <input type="radio" name="grade" id="btnESG" data-group="esg" value="7" /><label for="btnESG" style="width:110px;">Elem Girls</label>
    <input type="radio" name="grade" id="btnFUTURE" data-group="future" value="8" /><label for="btnFUTURE" style="width:110px;">Future Stars</label>

</div>
</form><br><br><br><br><br><br>
<table style="border:0px solid black;" cellpadding="0" cellspacing="0" width="1000" id="cal">
<tr height="40" style="background:black;color:white; text-align:center; font-family:arial; font-size:12px;">
<td width="14%">SUNDAY</td>
<td width="14%">MONDAY</td>
<td width="14%">TUESDAY</td>
<td width="14%">WEDNESDAY</td>
<td width="14%">THURSDAY</td>
<td width="14%">FRIDAY</td>
<td width="14%">SATURDAY</td>
</tr>
<tr height="60">
<td class="three group2 group3 group4 group5 group6 group7 group8" data-group="hsb msb esb hsg msg esg"><span class="time">8am</span><br><br>ALL TEAMS</td>
<td class="three group2 group4 group6" data-group="hsb msb esb"><span class="time">6pm</span><br><br>BOYS ONLY</td>
<td class="two group4" data-group="msb"><span class="time">6pm</span><br><br>MSB</td>
<td class="two group5" data-group="msg"><span class="time">6pm</span><br><br>MSG</td>
<td class="two group2" data-group="hsb"><span class="time">6pm</span><br><br>HSB</td>
<td class="three group3 group5 group7" data-group="hsg msg esg"><span class="time">6pm</span><br><br>GIRLS ONLY</td>
<td class="one group6 group7" data-group="esb esg"><span class="time">8am</span><br><br>ESB & ESG</td>
</tr>
<tr height="60">
<td class="one group6 group7" data-group="esb esg"><span class="time">9am</span><br><br>ESB @ ESG</td>
<td class="two group7" data-group="esg"><span class="time">7pm</span><br><br>ESG</td>
<td class="two group2" data-group="hsb"><span class="time">7pm</span><br><br>HSB</td>
<td class="one group6 group7" data-group="esb esg"><span class="time">7pm</span><br><br>ESB & ESG</td>
<td class="two group5" data-group="msg"><span class="time">7pm</span><br><br>MSG</td>
<td class="two group6" data-group="esb"><span class="time">7pm</span><br><br>ESB</td>
<td class="one group2 group4" data-group="hsb msb"><span class="time">9am</span><br><br>HSB & MSB</td>
</tr>
<tr height="60">
<td class="three group8" data-group="future"><span class="time">10am</span><br><br>FUTURE STARS</td>
<td class="one group3 group5" data-group="hsg msg"><span class="time">8pm</span><br><br>HSG & MSG</td>
<td class="two group3" data-group="hsg"><span class="time">8pm</span><br><br>HSG</td>
<td class="two group4" data-group="msb"><span class="time">8pm</span><br><br>MSB</td>
<td class="two group3" data-group="hsg"><span class="time">8pm</span><br><br>HSG</td>
<td class="one group2 group4" data-group="hsb msb"><span class="time">8pm</span><br><br>HSB & MSB</td>
<td class="one group3 group5" data-group="hsg msg"><span class="time">10am</span><br><br>HSG & MSG</td>
</tr>
</table>
<script>
 $("#radiox input[type=radio]").on('click', function(){

    // get group name
    var group = $(this).data("group");

    // remove class from all cells
    $('#cal td').each(function(){
        $(this).removeClass('group-selected');
        $(this).removeClass('group-not-selected');
    });

    // stop if group was "all"
    if(group == "all"){
        return;
    }

    // add class for not selected groups
    $("#cal td").not('[data-group*="'+group+'"]').addClass("group-not-selected");

    // add class for selected groups
    $('#cal td[data-group*="'+group+'"]').each(function(){
        $(this).addClass("group-selected");
        console.log($(this).data());
    });

});
</script>