grouping with data attribute

An example of grouping with data attribute and using as a selector for jQuery

by Oliver Kelso

HTML

<form style="float:left; margin-top:30px;">
    <div id="radiox">
        <input type="radio" name="grade" id="btnHSB" data-group="hsb" value="2" />
        <label for="btnHSB" style="width:141px;">HS Boys</label>
        <input type="radio" name="grade" id="btnHSG" data-group="hsg" value="3" />
        <label for="btnHSG" style="width:141px;">HS Girls</label>
        <input type="radio" name="grade" id="btnMSB" data-group="msb" value="4" />
        <label for="btnMSB" style="width:141px;">MS Boys</label>
        <input type="radio" name="grade" id="btnMSG" data-group="msg" value="5" />
        <label for="btnMSG" style="width:141px;">MS Girls</label>
        <input type="radio" name="grade" id="btnESB" data-group="esb" value="6" />
        <label for="btnESB" style="width:141px;">Elem Boys</label>
        <input type="radio" name="grade" id="btnESG" data-group="esg" value="7" />
        <label for="btnESG" style="width:141px;">Elem Girls</label>
        <input type="radio" name="grade" id="btnFUTURE" data-group="future" value="8" />
        <label for="btnFUTURE" style="width:141px;">Future Stars</label>
        <input type="radio" name="grade" id="btnALL" data-group="all" value="8" />
        <label for="btnALL" style="width:141px;">ALL</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" data-group="hsb hsg msb msg esb esg future"><span class="time">8am</span>

            <br>
            <br>ALL TEAMS</td>
        <td class="three group2 group4...

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...

JavaScript

$("#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());
    });

});