jQuery addClass example

Change class name on click in jQuery

by Edgar Martinez

HTML

<div class="Table_Div" >
  <table class="User_Table">
    <thead>
      <tr><th>Col1</th><th>Col2</th></tr>
    </thead>
    <tbody>
      <tr><td>A1</td><td>B1</td></tr>
      <tr><td>A2</td><td>B2</td></tr>
      <tr><td>A3</td><td>B3</td></tr>
      <tr><td>A4</td><td>B4</td></tr>
      <tr><td>A5</td><td>B5</td></tr>
      <tr><td>A6</td><td>B6</td></tr>
      <tr><td>A7</td><td>B7</td></tr>
      <tr><td>A8</td><td>B8</td></tr>
      <tr><td>A9</td><td>B9</td></tr>
      <tr><td>A</td><td>B</td></tr>
      <tr><td>A</td><td>B</td></tr>
      <tr><td>A</td><td>B</td></tr>
      <tr><td>A</td><td>B</td></tr>
      <tr><td>A</td><td>B</td></tr>
      <tr><td>A</td><td>B</td></tr>
      <tr><td>A</td><td>B</td></tr>
      <tr><td>A</td><td>B</td></tr>
      <tr><td>A</td><td>B</td></tr>
    </tbody>
  </table>
</div>

CSS

.Table_Div 
{
    height: 200px; 
    overflow: auto; 
}

.User_Table{
    width: 100%;

    border-collapse: collapse; 
}

.User_Table th{
    text-align: left;
    color: white;
    border-right: 1px solid #ccc;
    background-color: #00920c;
}

.User_Table tbody td
{
    border:  1px solid #f1f1f1;
}

::-webkit-scrollbar {

width: 14px;

}

::-webkit-scrollbar-track  {

-webkit-box-shadow: inset 0 0 6px #05B7FF;

-webkit-border-radius: 0px;

background:#CBD5D7;

border-radius: 0px;

}

::-webkit-scrollbar-thumb  {

-webkit-border-radius: 0px;

border-radius: 0px;

background: #05B7FF;

-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);

}

::-webkit-scrollbar-thumb:hover  {

background: rgba(255,0,0,0.4);

}

::-webkit-scrollbar-thumb:window-inactive {

background: rgba(255,0,0,0.4);

JavaScript

$(function() 
{
		Fixed_Header();
});


function Fixed_Header()
{
    $('.User_Table thead').css({'position': 'absolute'});
    $('.User_Table tbody tr:eq("2") td').each(function(index,e){
        $('.User_Table thead tr th:eq("'+index+'")').css({'width' : $(this).outerWidth() +"px" });
    });
    var Header_Height = $('.User_Table thead').outerHeight();
    $('.User_Table thead').css({'margin-top' : "-"+Header_Height+"px"});
    $('.User_Table').css({'margin-top' : Header_Height+"px"});
}