Clickable TD Tag

by kakatua

HTML

<table class="coolTable">
   <tr>
   <td>      
   <a id='parent1' href='#child1' class="parent">G</a>
   <div id="child1" class="child child-dropdown"></div>
   </td>
   </tr>
   <tr>
   <td><a id='parent2' href='#child2' class="parent">C</a>
   <div id="child2" class="child child-dropdown"></div></td>
   </tr>
</table>

CSS

a {
    color:white;
    text-decoration:none;
}

.child p{
    margin: 0;
    padding: 5px 8px;
    border: 1px solid #CCCCCC;
    cursor: pointer;
    background : white;
}
.child p:hover{
    background: #f2f2f2;
}

.child-dropdown{
	position:absolute;
	display:none;
	z-index:9;
	color:red;
}

.child-dropdown:target{
  display:block;
}



table.coolTable td {
    background-color:green;
    color:green;
    margin: 0;
    padding: 5px 8px;
}

table.coolTable td:hover {
    background-color:green;
    color:green;
}

td a {
    display:block;
    width:100%;
}

JavaScript

$(document).ready(function(){
        $(".parent").click(function() {
        		$(this).parent(".child").empty();
        		var data="<p>A</p><p>B</p>"
            /* Get input value on change */
            var inputVal = $(this).val();
            var resultDropdown = $(this).siblings(".child");
                    // Display the returned data in browser
            resultDropdown.html(data);
        });
        $(document).on("click", ".child p", function(){
        		$(this).parents(".parent").find('a').val("A");
            $(this).parent(".child").empty();
        });
    });