Web Development

<style>
        body { font-family: San-Serif; color:white;}
        table { border-collapse: collapse;}
        th { text-align: left; }
        tr.black { background-color: black; }
        tr.blue { background-color:blue;}        
</style>

<style>
  .markedBlack, .markedBlue{background:gray}       
</style>

<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

<script>
    $(document).ready(function() {
       $("tbody tr").mouseover(function() {   
           $(this).css("background","purple"); 
       });
 
       $(".black").mouseout(function() {      
          $(this).css("background","black"); 
       });

       $(".blue").mouseout(function() {      
          $(this).css("background","blue");         
       });
 
       $(".black").click(function(){              
           $(this).removeClass("black").addClass("markedBlack");           
       });

       $(".blue").click(function(){   
           $(this.blue").removeClass("blue").addClass("markedBlue");           
       });

       $(".markedBlack").click(function(){                 
              $(".markedBlack").removeClass("markedBlack").addClass("black"); 
           $(this).addClass("markedBlack");                     
       });

       $(".markedBlue").click(function(){             
              $(".markedBlue").removeClass("markedBlue").addClass("blue");  
           $(this).addClass("markedBlue");         
       });
     });   

</script>

<table>
    <thead>
        <tr>
          <th>Title1</th><th>Title2</th><th>Title3</th>
        </tr>
    </thead>
    <tbody>
        <tr class="blue">
          <td>blue</td> <td>blue</td> <td>blue</td>
        </tr>
        <tr class="black">
          <td>black</td> <td>black</td> <td>black</td>
        </tr>
        <tr class="blue">
          <td>blue</td> <td>blue</td> <td>blue</td>
        </tr>
        <tr class="black">
          <td>black</td> <td>black</td> <td>black</td>
        </tr>
    </tbody>
</table>