Untitled

<style>
    .highlight { background:yellow; }
</style>

<script>

$(function() {
    $('td').click(function() {
        alert(event.target.id);
       $(this).toggleClass("highlight");
    });
});
</script>
<%@ page import="java.util.*" %>
<%
ArrayList<String> rooms = new ArrayList<String>();
rooms.add("GSR_2-1");
rooms.add("GSR_2-2");
rooms.add("GSR_2-3");
rooms.add("GSR_2-4");
ArrayList<String> time = new ArrayList<String>();
time.add("0800");
time.add("0830");
time.add("0900");
time.add("0930");
%>
<table width="100%" border="1">
<%
    for(int x = 0 ; x<time.size() ; x++){
        out.println("<tr>");
        for(int y = 0 ; y<rooms.size() ; y++){
            out.println("<td id="+rooms.get(y) +">");
            out.println(rooms.get(y)+" "+time.get(x));
            out.println("</td>");
        }
        out.println("</tr>");
    }
%>

$('td').click(function() {
    var $td = $(this);
    $td.closest('table').find('tr').each(function() {
        $(this).find('td:eq('+$td.index()+')').toggleClass("highlight");
    });
});

<html>

    <head>

        <title>Classes</title>

    </head>

    <body>

        <table>

            <tr>

                <td class='col1'>11</td>
                <td class='col2'>12</td>

            </tr>
            <tr>

                <td class='col1'>21</td>
                <td class='col2'>22</td>

            </tr>

        </table>

    </body>

</html>


.highlight {

    /* your style here*/
    background: #00aa00; /* demo highlight*/

}
td {

    padding: 2px;

}


$("table tr td").on("click", function(){

    var clss = $(this).attr('class');
    var selector = "table tr td." + clss;
    if (clss.match(/highlight/)) {
        $(".highlight").removeClass("highlight");
    } else if ($(".highlight").size() == 0) {
        $(selector).addClass("highlight");
    }
});