...

View Full Version : Item select from a table



Dirkvanscs
01-02-2007, 05:15 PM
Hello all,

First sorry for my poor english and a happy 2007.

Now my problem:

In a table i have 3x3 items (see image).

http://www.scswebdesign.nl/table.png

How can i select in each row an item (only one) and clicking on 'Solution' presenting them in a popup?

Sample: first row my choice is 'red' in the second row i selected 'dog' and in the third row 'thai'
Clicking on 'Solution' a popup shows with the selected items eg red + dog + thai.

Who can help me with this?

Ancora
01-02-2007, 05:31 PM
Dirkvanscs:



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Any Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

var currColor = [];
var selectedData = [];
var isTable = "";
var nRows = 0;

function doSomething(){

selectedData.length = 0;
p = 0;
nRows = isTable.rows.length;
for (i=0; i<nRows; i++)
{
nCells = isTable.rows[i].cells.length;
for (n=0; n<nCells; n++)
{
if (isTable.rows[i].cells[n].className == "TD_Click")
{selectedData[p++] = isTable.rows[i].cells[n].innerHTML}
}
}
alert(selectedData);
}

function setClickColor(isCell){

if (isCell.className == "TD_Click"){isCell.className = "default"}
else {isCell.className = "TD_Click"}
for (i=0; i<nRows; i++)
{
nCells = isTable.rows[i].cells.length;
for (n=0; n<nCells; n++)
{if (isTable.rows[i].cells[n] == isCell){currRow=i;currCell=n}}
}
rowLength = isTable.rows[currRow].cells.length;
for (i=0; i<rowLength; i++)
{
if (i != currCell)
{isTable.rows[currRow].cells[i].className = "default"}
currColor[i] = isTable.rows[currRow].cells[i].className;
}
}

function init(){

isTable = document.getElementById('Table1');
nRows = isTable.rows.length;
for (i=1; i<nRows; i++)
{
isTable.rows[i].onmouseover = function()
{
this.style.cursor = 'pointer';
nCells = this.cells.length;
for(n=1; n<nCells; n++)
{
currColor[n] = this.cells[n].className;
if (currColor[n] != "TD_Click")
{this.cells[n].className='TR_Hover'}
}
}
isTable.rows[i].onmouseout = function()
{
for(n=1; n<nCells; n++)
{this.cells[n].className=currColor[n]}
}
}
}

onload=init;

</script>
<style type="text/css">

body {background-color:#eae3c6;margin-top:60px}
.TR_Hover {background-color:#87ceeb}
.TD_Click {background-color:red}
.default {background-color:#ffffe0}

</style>
</head>
<body>
<table id='Table1' align='center' bgcolor='#ffffe0' border='1' cellspacing='0' cellpadding='5' width='400'>
<tr>
<td width="25%">
&nbsp;
</td>
<td width="25%">
C1
</td>
<td width="25%">

C2
</td>
<td width="25%">
C3
</td>
</tr>
<tr>
<td>
R1
</td>

<td id='c1' onclick="setClickColor(this)">
One
</td>
<td id='c2' onclick="setClickColor(this)">
Two
</td>
<td id='c3' onclick="setClickColor(this)">
Three
</td>
</tr>
<tr>
<td>
R2
</td>
<td id='c4' onclick="setClickColor(this)">
Four
</td>
<td id='c5' onclick="setClickColor(this)">
Five
</td>

<td id='c6' onclick="setClickColor(this)">
Six
</td>
</tr>
<tr>
<td>
R3
</td>
<td id='c7' onclick="setClickColor(this)">
Seven
</td>

<td id='c8' onclick="setClickColor(this)">
Eight
</td>
<td id='c9' onclick="setClickColor(this)">
Nine
</td>
</tr>
</table><br>
<center>
<input type="button" value="Do Something" onclick="doSomething()">
</center>
</body>
</html>

Dirkvanscs
01-02-2007, 05:38 PM
Wow, that's a quick reply, thanks a lot.
Going to look at the code and learn from it (i'm a beginner with JS).

Thanks again.

Ancora
01-02-2007, 05:50 PM
Dirkvanscs:
You're welcome. Good luck with your project.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum