jQuery addClass example

Change class name on click in jQuery

by synz izynz

HTML

<div id="container">
  <div id="bothwrapper">
  <table border="1">
     <thead>
       <tr>
         <th>name1</th>
         <th>name2</th>
         <th>name3</th>
         <th>name4</th>
       </tr>
     </thead>
    <tbody>
       <tr data-column="first-coulmn">
         <td>hello1</td>
         <td>hello2</td>
         <td>hello3</td>
         <td>hello4</td>
       </tr>
        <tr data-column="second-coulmn">
         <td>hello1</td>
         <td>hello2</td>
         <td>hello3</td>
         <td>hello4</td>
       </tr>
        <tr data-column="third-coulmn">
         <td>hello1</td>
         <td>hello2</td>
         <td>hello3</td>
         <td>hello4</td>
       </tr>
       <tr data-column="fourth-coulmn">
         <td>hello1</td>
         <td>hello2</td>
         <td>hello3</td>
         <td>hello4</td>
       </tr>
       <tr data-column="fifth-coulmn">
         <td>hello1</td>
         <td>hello2</td>
         <td>hello3</td>
         <td>hello4</td>
       </tr>
       <tr data-column="sixth-coulmn">
         <td>hello1</td>
         <td>hello2</td>
         <td>hello3</td>
         <td>hello4</td>
       </tr>
        <tr data-column="seventh-coulmn">
         <td>hello1</td>
         <td>hello2</td>
         <td>hello3</td>
         <td>hello4</td>
       </tr>
      <tr data-column="eighth-coulmn">
         <td>hello1</td>
         <td>hello2</td>
         <td>hello3</td>
         <td>hello4</td>
       </tr>
        <tr data-column="nineth-coulmn">
         <td>hello1</td>
         <td>hello2</td>
         <td>hello3</td>
         <td>hello4</td>
       </tr>
    </tbody>
  </table>
  </div>
  <div id="dataView">
    
  </div>
</div>

CSS

table{
  border:1px solid #ccc;
  border-collapse:collapse;
  width:100%;
  box-shadow:0 15px 40px black;
}

table thead,tbody td{
  padding:20px;
}

#container{
  width:100%;
}

#bothwrapper{
  max-height:210px;
  overflow-y:scroll;
  width:65%;
  float:left;
  outline:1px solid #999;
}

#dataView{
  float:right;
  width:35%;
  background:red;
  height:200px;
  outline:1px solid #999;
  outline-offset: 10px;
}

/* table tbody tr:hover{
  background:skyblue;
} */

.active{
  background:skyblue;
}

JavaScript

$(function(){
		$('table tbody tr').on('mouseover',function(evt){   

			// Check if ctrl pressed  
			if (evt.ctrlKey){
				$('table tbody tr').removeClass('active');
				$(this).addClass('active').css("cursor","pointer"); 
				var data = $(this).data('column');
				$('#dataView').html('<p style="color:#fff;font-size:18px;">'+data+'</p>'); 
			}else{
				$(this).css("cursor","default"); 

			}
		});

		$('table tbody tr').on('click',function(){

			if($(this).hasClass("active")){
				$(this).removeClass('active');
			}else{
				$('table tbody tr').removeClass('active');
				$(this).addClass('active');
			}

			var data = $(this).data('column');
			$('#dataView').html('<p style="color:#fff;font-size:18px;">'+data+'</p>'); 
		});
	});