practise

by Rituja Veer

HTML

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/Celebio/SlickGrid/master/slick.grid.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/Celebio/SlickGrid/master/slick-default-theme.css">
  <form id="form1">
      <div  class="divTable" align="center"  >
          <div class="divCat">
             <div class="headRow">

                 <div class="wrap"><div id="divCell1" class="divCell">ID</div></div>
                <div  id="divCell0" class="divCell" >No</div>
                  <div  id="divCell2" class="divCell" >verified</div>
                
             </div>
            <div class="divRow0">
                 <div class="wrap"> <div id="divCell3" class="divCell">1</div></div>
                <div id="divCell4" class="divCell" >A</div>
                <div id="divCell4" class="divCell" >true</div>
                 
                
            </div>
            <div class="divRow1">
                <div class="wrap"><div id="divCell5" class="divCell" >2</div></div>
                <div id="divCell6" class="divCell" >B</div>
                <div id="divCell4" class="divCell" >false</div>
              
              
           </div>
              
          
          <div class="divRow0">
               <div class="wrap"> <div id="divCell7" class="divCell" >3</div></div>
                <div id="divCell8" class="divCell" >C</div>
              <div id="divCell4" class="divCell" >true</div>
             
              
           </div>
          <div class="divRow1">
             <div class="wrap">   <div id="divCell9" class="divCell" >4</div></div>
                <div id="divCell10" class="divCell" >D</div>
                    <div id="divCell4"...

CSS

.divCat{
      
       width:auto;
      float:left;
       overflow-x:scroll;   
       }
 

.divTable

    { 
    

       
        float:left;
         display:table;
        width:auto;
        height:150px;
     
    
       
        border:1px solid  #666666;
        border-spacing:5px;
        border-collapse: collapse;
    }


.headRow{
         position:fixed;
         height:20px;
         background-color:#2682E5;
         background:#2682E5;
         width:auto;
    
    
}

.selected{
        z-index:20;
        background:#E0621B;
        background-color:#E0621B;
    
}




    .divRow0
    {
       
        display:table-row;
        width:auto;
        background:#C6CACE;
        z-index:10;
        border:1px solid  #666666;
        
    }
    .divRow1
    {
        
       display:table-row;
       width:auto;
       border:1px solid  #666666;
      
    }

    .divCell

    {

        float:left;
        display:table-column;
        width:200px;
        border-spacing:2px;
        border:1px solid  #666666;
    }

.wrap{
   z-index:100;
    position:fixed;
    margin-left: -50px;
    width:10px;
}

JavaScript

$('.divRow1').on('click',function() {
   
    $(this).toggleClass('selected')
    console.log("output is here");
  });

$('.divRow0').on('click',function() {
   alert("im in");
    $(this).toggleClass('selected')
    console.log("output is here");
  });