chiprivers Posted March 5, 2010 Share Posted March 5, 2010 I need a little inspiration to help me work out how best to achieve something on a site I am working on. So rather than trying to explain the complexities of what I am actually doing, here is a little challenege for you JavaScript boffins. This is a simplified version of what I need to achieve and any working results should point me in the right direction. The challenge is to be able to display a 10 by 10 square grid using a <table> to lay it out on the page. Each cell will just be empty but with a white background. The user should be able to select a number of squares on any indiviual row by first left clicking in the first square of the selection and then left clicking in the last square of the selection. As the user is selecting these squares, to show that they are selected, the first square will turn blue when it is clicked, and then the whole selection will turn blue when the second sqaure is clicked. Once some squares are selected, the user should be able to right click to display a menu box which will contain a list of colours. Upon clicking one of these colours from the list, the background of the selected squares will change to the selected colour and the selected squares will be come unselected. Hopefully this is a very simple little bit of coding to somebody who has a good knowledge of JavaScript! Quote Link to comment Share on other sites More sharing options...
Omirion Posted March 5, 2010 Share Posted March 5, 2010 Will do. I don't know why you would wan't to do it in javascript though. There are more reasonable solutions. Quote Link to comment Share on other sites More sharing options...
Psycho Posted March 6, 2010 Share Posted March 6, 2010 I'm not going to take the time to implement a right-click menu. But this should get you started. I used PHP to create the table to cut down on the code to write. If you need the raw output let me know and I can post it. The solution below only requires theuser to click once in a row to select the cells - not twice as you were asking. My implementation is more intuitive. <?php $table = "<table class=\"selector\" border=\"1\">\n"; for ($rows=0; $rows<10; $rows++) { $table .= " <tr>\n "; for ($cols=0; $cols<10; $cols++) { $table .= " <td id=\"{$rows}-{$cols}\" onclick=\"selectCells(this);\"> </td>\n"; } $table .= " <td>"; $table .= "<select name=\"{$rows}-color\" id=\"{$rows}-color\" disabled=\"disabled\" onchange=\"setColor(this)\">"; $table .= "<option value=\"\">--Select Color--</option>"; $table .= "<option value=\"#ff0000\">Red</option>"; $table .= "<option value=\"#00ff00\">Green</option>"; $table .= "<option value=\"#0000ff\">Blue</option>"; $table .= "</select>\n"; $table .= "</td>\n"; $table .= "\n </tr>\n"; } $table .= "</table>\n"; ?> <html> <head> <style> .selector td { height:20px; width:20px; } </style> <script type="text/javascript"> function selectCells(selectedCell) { var selectedRow = selectedCell.id.substr(0, selectedCell.id.indexOf('-')); var selectedCol = selectedCell.id.substr(selectedCell.id.indexOf('-')+1); //Unset all previous selections for (var row=0; row<10; row++) { document.getElementById(row+'-color').disabled = (row!=selectedRow); document.getElementById(row+'-color').disabled = (row!=selectedRow); if (row==selectedRow) { document.getElementById(row+'-color').selectedIndex = 0; } for(var col=0; col<10; col++) { var cellObj = document.getElementById(row+'-'+col); if (cellObj.selected==true) { cellObj.selected = false; cellObj.style.backgroundColor = '#ffffff'; } } } for(var col=0; col<10; col++) { var cellObj = document.getElementById(selectedRow+'-'+col); cellObj.style.backgroundColor = (col<=selectedCol) ? '#0066ff' : '#ffffff'; cellObj.selected = (col<=selectedCol) ? true : false; } } function setColor(selectObj) { var selectedRow = selectObj.id.substr(0, selectObj.id.indexOf('-')); var selectedColor = selectObj.value; if (selectedColor=='') { return false; } for (var col=0; col<10; col++) { var cellObj = document.getElementById(selectedRow+'-'+col); if(cellObj.selected) { cellObj.style.backgroundColor = selectedColor; cellObj.selected = false; } } } </script> </head> <body> <?php echo $table; ?> </body> </html> Quote Link to comment Share on other sites More sharing options...
chiprivers Posted March 7, 2010 Author Share Posted March 7, 2010 Thanks MJDAmato, that gives me something to start with OMIRION, what would be your preferred method of doing this instead of JavaScript? I'm all for making it easy on myself! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.