One button, multiple states [Archive]

Waldemar

02-02-2006, 02:04 PM

Hi,
I'm working on an web application, and in one administration screen we have a grid (table) and each cell in this grid must contain a certain value.
It could be an 'L' or a 'C' or an '-'

The current solution is a little pulldown in each cell, but this is not easy to maintain.
I was wondering if it's possible to have a button with this functionality:

var A1 = ""

click #1 : Value (display text) = "L", background-color: blue; set var A1 = "L"
click #2 : Value = "C", background-color: blue; set var A1 = "C"
click #3: Value = "-", background-color: gray; set var A1 = ""
(on the next click its again like #1, etc.)

Any idea if this is even possible?

Thanks
Waldemar

ronaldb66

02-02-2006, 03:33 PM

This sounds like a JavaScript question to me; I'll ask a moderator to move it to the JavaScript forum.

Please do not cross-post there.

dumpfi

02-02-2006, 06:48 PM

Try this:<html>
<head>
<style type="text/css">
body
{
margin:0px;
padding:3em 5em 5em 3em;
}
table
{
background-color:#f0f0f0;
color:#a0a0ff;
font-size:2em;
width:400px;
height:400px;
}
td
{
width:100px;
height:100px;
vertical-align:middle;
text-align:center;
border:1px solid #c0c0c0;
empty-cells:show;
}
</style>
<script type="text/javascript">
var
cells = [], // a collection of all the cells of the table; this gets auto-populated by getCells()
values = ['L', 'C', '-'], // all possible values of a cell
bgColors = ['#0000ff', '#0000ff', 'inherit'], // the background colors associated with the values (associated by index)
cellValues = [null, 'L', '-', null, null, 'C']; // the values of each cell; they may be prepolutated in this array, directly within the cell or not at all

window.onload = initCells;

// change this function to populate the cells array with all the cells of the table
function getCells()
{
var rows = document.getElementById('gridTable').rows;
for(i = 0; i < rows.length; ++i)
{
cells.concatNodes(rows[i].cells);
}
}
function initCells()
{
var i, index;
getCells();
for(i = 0; i < cells.length; ++i)
{
if(cells[i].firstChild == null || cells[i].firstChild.nodeType != 3)
{
cells[i].insertBefore(document.createTextNode(''), cells[i].firstChild);
}
index = values.indexOf((typeof cellValues[i] != 'undefined') ? cellValues[i] : cells[i].firstChild.data);
if(index != -1)
{
applyChanges(index, i);
}
cells[i].onclick = changeCellValue;
}
}
function getNextIndex(value)
{
var index = values.indexOf(value) + 1;
if(index == values.length)
{
index = 0;
}
return index;
}
function changeCellValue()
{
var index = getNextIndex(this.firstChild.data);
cIndex = cells.indexOf(this);
applyChanges(index, cIndex);
}
function applyChanges(index, cIndex)
{
cells[cIndex].firstChild.data = values[index];
cells[cIndex].style.backgroundColor = bgColors[index];
cellValues[cIndex] = values[index];
}
Array.prototype.indexOf = function(value)
{
for(var i = 0; i < this.length; ++i)
{
if(this[i] == value)
{
return i;
}
}
return -1;
}
Array.prototype.concatNodes = function(nodeCollection)
{
for(var i = 0; i < nodeCollection.length ; ++i)
{
this.push(nodeCollection[i]);
}
}
</script>
</head>
<body>
<table id="gridTable">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>C</td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>L</td>
<td>-</td>
<td></td>
</tr>
</table>
</body>
</html>dumpfi

Waldemar

02-03-2006, 12:38 PM

Hi Dumpfi, thanks a lot!! It works perfectly. I could never create this script myself! :thumbsup: