Item select from a table

Dirkvanscs · 01-02-2007, 04: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).

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, 04:31 PM

Dirkvanscs:

Code:

<!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, 04: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, 04:50 PM

Dirkvanscs:
You're welcome. Good luck with your project.