Div table with click event

**softwareguy74** · Aug 3rd, 2010, 10:51 AM

I need to create a ranking system that allows the user to click in a particular block at which time that block and all previous blocks will turn the color red.

I have attached a sample screenshot of what it would look like if the user clicked in block two. If the user clicked in block one, block two would clear, etc.

I really prefer to make this grid using DIV/CSS, rather than a Table.

Any help would be appreciated.

**coothead** · Aug 3rd, 2010, 03:22 PM

Hi there dbassettt74,

have a look at this example, it may suit your requirements....

Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title></title>

<style type="text/css">
body {
    background-color:#f0f0f0;
 }
#boxes {
    width:186px;
    height:18px;
    padding:0;
    border:1px solid #000;
    border-right:0;
    margin:40px auto 0;
    list-style-type:none;
 }
#boxes li {
    float:left;
    width:30px;
    height:18px;
    border-right:1px solid #000;
 }
.white {
    background-color:#fff;
 }
.red {
    background-color:#f60400;
 }
</style>

<script type="text/javascript">

function colorBoxes(){

    l=document.getElementById('boxes').getElementsByTagName('li');

for(c=0;c<l.length;c++) {
   l[c].number=c;  
   l[c].onclick=function() {

for(c=0;c<l.length;c++) {
if(l[c].number<=this.number) {
   l[c].className='red';
  }
else {
if(l[c].number>this.number) {
   l[c].className='white';
     }
    }
   }
  }
 }

l[0].ondblclick=function() {
   if(this.className=='red'){
   this.className='white';
   }
  }
 }

if(window.addEventListener){
   window.addEventListener('load',colorBoxes,false);
 }
else { 
if(window.attachEvent){
   window.attachEvent('onload',colorBoxes);
  }
 }

</script>

</head>
<body>

<ul id="boxes">
 <li class="white"></li>
 <li class="white"></li>
 <li class="white"></li>
 <li class="white"></li>
 <li class="white"></li>
 <li class="white"></li>
</ul>

</body>
</html>

Note:- double clicking the first box will clear all the boxes.

**softwareguy74** · Aug 10th, 2010, 12:13 PM

NICE! As always man, you came through. Thanks for the great example!

**coothead** · Aug 10th, 2010, 12:22 PM

No problem, you're very welcome.

**softwareguy74** · Aug 14th, 2010, 05:23 PM

Would it be hard to modify this so that I can specify the width and height of the outside of the div, and the internal squares will resize proportionally? So the inside squares will not be a fixed height width, rather, they will resize with the outside dimensions. Thanks!

**coothead** · Aug 14th, 2010, 06:48 PM

Hi there dbassettt74,

the table element is the ideal element to use for your new specification.

Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>little boxes</title>

<style type="text/css">
#container {
    width:800px;
    height:100px;
    margin:auto;
 }
#boxes {
    width:100&#37;;
    height:100%;
    border-collapse:collapse;
 }
#boxes td {
    border:1px solid #000;
    text-align:center;
 }
.white {
    background-color:#fff;
 }
.red {
    background-color:#f60400;
 }
</style>

<script type="text/javascript">
function colorBoxes(){

    l=document.getElementById('boxes').getElementsByTagName('td');

for(c=0;c<l.length;c++) {
   l[c].number=c;  
   l[c].onclick=function() {

for(c=0;c<l.length;c++) {
if(l[c].number<=this.number) {
   l[c].className='red';
  }
else {
if(l[c].number>this.number) {
   l[c].className='white';
     }
    }
   }
  }
 }

l[0].ondblclick=function() {
   if(this.className=='red'){
   this.className='white';
   }
  }
 }

if(window.addEventListener){
   window.addEventListener('load',colorBoxes,false);
 }
else { 
if(window.attachEvent){
   window.attachEvent('onload',colorBoxes);
  }
 }

</script>

</head>
<body>

<div id="container">

<table id="boxes"><tr>
 <td>1</td><td>2</td><td>3</td>
 <td>4</td><td>5</td><td>6</td>
</tr></table>

</div>

</body>
</html>

Thread: Div table with click event

Thread Tools

Display

Div table with click event

Re: Div table with click event

Re: Div table with click event

Re: Div table with click event

Re: Div table with click event

Re: Div table with click event

Posting Permissions