Gmail Style Row Selection and Checkbox

Create a test.htm file.

Code the following javascript and table at the beginning of the page:

<script>
 function toggleClick(i)
 {
  if(document.getElementById(“chk”+i).checked == true)
  {
   document.getElementById(“chk”+i).checked = false;
   document.getElementById(i).style.backgroundColor=’white’;
  }
  else if(document.getElementById(“chk”+i).checked == false)
  {
   document.getElementById(“chk”+i).checked = true;
   document.getElementById(i).style.backgroundColor=’#99CC66′;
  }
 }
 
 function mover(i,status)
 {
  if(document.getElementById(“chk”+i).checked == false)
  {
   if(status == ‘over’)
   {
    document.getElementById(i).style.backgroundColor = “#FFCC66”;
   }
   else if(status == ‘out’)
   {
    document.getElementById(i).style.backgroundColor = “white”;
   }
  }
 }
 </script>

<table border=”1″ cellpadding=”1″ cellspacing=”1″>  
    <tr
  onclick=”toggleClick(‘9’)”
  id=”9″ bgcolor=”white”
  onmouseover=”mover(‘9′,’over’);”
  onmouseout=”mover(‘9′,’out’);”
 >
    <td >
    <input  id=”chk9″
   onclick=”toggleClick(‘9’);” type=”checkbox”
   name=”chk” value=”checkbox” />      </td>
      <td height=”29″> <div align=”center” class=”searchText”>AUDI</div></td>
      </tr>
  
    <tr
  

  
  onclick=”toggleClick(‘8’)”
  id=”8″ bgcolor=”white”
  onmouseover=”mover(‘8′,’over’);”
  onmouseout=”mover(‘8′,’out’);”
 >
      <td ><label></label>
        <label >
        <input id=”chk8″
   onclick=”toggleClick(‘8′);” type=”checkbox”
   name=”chk” value=”checkbox” />
      </label></td>
      <td height=”29″> <div align=”center” class=”searchText”>TOYOTA</div></td>
      </tr>
  
    <tr
  

  
  onclick=”toggleClick(’10’)”
  id=”10″ bgcolor=”white”
  onmouseover=”mover(’10’,’over’);”
  onmouseout=”mover(’10’,’out’);”
 >
      <td ><label></label>
        <label >
        <input id=”chk10″
   onclick=”toggleClick(’10’);” type=”checkbox”
   name=”chk” value=”checkbox” />
      </label></td>
      <td height=”29″> <div align=”center” class=”searchText”>VOLKSWAGEN</div></td>
      </tr>
    </table>

Advertisements

One thought on “Gmail Style Row Selection and Checkbox

  1. Pingback: Style » Gmail Style Row Selection and Checkbox

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s