File "test01.html"

Full Path: /home/analogde/www/Design/fileman/Fusion/table_selection/test01.html
File size: 2.67 KB
MIME-type: text/html
Charset: utf-8

<style>

.gridview
{
    border-collapse: collapse;
    margin: 0px 10px 10px 0;
    box-shadow: 3px 3px 4px #bbb;    
}

.gridview, .gridview td,  .gridview th
{
    border:  1px solid #cccccc;
}

.gridview th
{
    text-align: left;
    /*font-size: 1.2em;*/
    font-weight: normal;
    color: #F9F9F9;    
    background: #337EB5;
}

.gridview th a, .gridview th a:link, .gridview th a:visited, .gridview th a:active
{
    color: #F9F9F9;
    text-decoration: none;
}

.gridview th a:hover
{
    text-decoration: underline;
}

.gridview tr
{
    background: #F4F9FD;
}

.gridview tr:nth-child(odd) 
{
    background-color: #F4F9FD;
}
.gridview tr:nth-child(even) 
{
    background-color: #EDF5FC;
}

.gridview td 
{
    font-weight: normal;    
    text-align: left;
    vertical-align: top;
}

.gridview td, table th
{
    padding: 5px 8px;
}

.gridview tfoot td
{
    background-color: #EEEEEE;
}

.gridview tfoot td .page
{
    color: #000000;
    font-weight: bold;
}

.gridview tr.subfoot, .gridview tr.subfoot td
{
    background-color: #FFFFEC;
}

.gridview tr:hover td, .gridview tbody tr:hover td
{
    background-color: #FFFFD7;
    color: #696969;
}

.gridview .selected, .gridview tbody .selected
{
    background-color: #6ccbfb;
    color: #fff;
}

</style>    

<script>

function toggleClass(el, className) {
  if (el.className.indexOf(className) >= 0) {
    el.className = el.className.replace(className,"");
  }
  else {
    el.className  += className;
  }
}

</script>

<table class="gridview">
   <tr>
     <th>Col1</th>
     <th>Col2</th>
     <th>Col3</th>
     <th>Col4</th>
   </tr>
   <tr onclick="toggleClass(this,'selected');">
     <td>Data1</td>
     <td>Data2</td>
     <td>Data3</td>
     <td>Data4</td>
   </tr>
   <tr onclick="toggleClass(this,'selected');">
     <td>Data1</td>
     <td>Data2</td>
     <td>Data3</td>
     <td>Data4</td>
   </tr>
   <tr onclick="toggleClass(this,'selected');">
     <td>Data1</td>
     <td>Data2</td>
     <td>Data3</td>
     <td>Data4</td>
   </tr>
   <tr onclick="toggleClass(this,'selected');">
     <td>Data1</td>
     <td>Data2</td>
     <td>Data3</td>
     <td>Data4</td>
   </tr>
   <tr onclick="toggleClass(this,'selected');">
     <td>Data1</td>
     <td>Data2</td>
     <td>Data3</td>
     <td>Data4</td>
   </tr>
   <tr onclick="toggleClass(this,'selected');">
     <td>Data1</td>
     <td>Data2</td>
     <td>Data3</td>
     <td>Data4</td>
   </tr>
   <tr onclick="toggleClass(this,'selected');">
     <td>Data1</td>
     <td>Data2</td>
     <td>Data3</td>
     <td>Data4</td>
   </tr>
 </table>