Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Item select from a table

    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?
    Last edited by Dirkvanscs; 01-02-2007 at 04:18 PM.

  • #2
    Banned
    Join Date
    Oct 2005
    Location
    I'm in GMT -5
    Posts
    314
    Thanks
    0
    Thanked 1 Time in 1 Post
    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>

  • #3
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    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.

  • #4
    Banned
    Join Date
    Oct 2005
    Location
    I'm in GMT -5
    Posts
    314
    Thanks
    0
    Thanked 1 Time in 1 Post
    Dirkvanscs:
    You're welcome. Good luck with your project.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •