raghup Posted May 29, 2007 Share Posted May 29, 2007 I am new to Javascript. I have a small code below. It creates a grid of 80 numbers. I want to do the following1. When mouse over a number it's color should change to say "red"2. When I click a number, the back ground color should change to say "blue" and the number be picked and placed into the text box3. When I click a number the second time, it should be deselected from the text box and the background color should return back to its normal color4. User can pick only 20 numbers not more.Any help will be appreciated.Thank youCheersRaghups. this is similar to a multi date picker http://javascript.internet.com/forms/multi-date-picker.html<html><head><script type="text/javascript" type = "text/JavaScript"><!--function doTable(){var i, j;document.write("<table border = '2'>") document.write("<tr>") document.write("<th bgcolor='#FFFF99'>") document.write("Select 20 Numbers") document.write("</th>") document.write("<th bgcolor='#FFFF99'>") document.write("Selected Numbers") document.write("</th>") document.write("</tr>") document.write("<tr bgcolor='#ccd4ee'>") document.write("<td>") document.write("<table border = '1' cellpadding = '5'>") for(i = 0; i < 9; i++) { document.write("<tr>") for(j = 0; j < 8; j++) { document.write("<td><b>") document.write(j,i+1) document.write("</b></td>") } document.write("</tr>") } document.write("<tr>") for(i = 0; i < 8; i++) { document.write("<td><b>") document.write(i+1,0) document.write("</b></td>") } document.write("</tr>") document.write("</table>") document.write("</td>") document.write("<td>") document.write("<textarea rows = '15'></textarea>") document.write("</td>") document.write("</tr>")document.write("</table>")}--></script></head><body><script type="text/javascript" type = "text/JavaScript"><!--doTable()--></script></body></html> Link to comment Share on other sites More sharing options...
justsomeguy Posted May 31, 2007 Share Posted May 31, 2007 When you write out the number here:document.write(j,i+1)You will need to wrap the number in a tag with event handlers for mouseover, mouseout, and click. You could handle the mouseover and mouseout with just a CSS class, in that case you would need to put the classname in the tag surrounding the number. The click event handler for the numbers would have to check something like the foreground or background color (or whatever changes) and decide if the number needs to be selected or deselected, fill in the value of a text box, and keep track of a counter to make sure that only the allowed number have been selected.I'm not going to write all that code for you, and I'm not sure how much you already know so I'm not real sure where to tell you to start. The line to write the numbers may look something like this:document.write("<div id=\"num_" + j + "_" + (i + 1) + "\" class=\"number\" onclick=\"do_click(this);\">" + j + (i+1) + "</div>")The main thing you need to do is write the click function handler (in this case, named do_click).Also, when testing something like this, you will want to use a browser that will let you see the source code generated by Javascript. I believe that Firefox has an extension that will do that, and Opera has a plugin that will do that here:http://operawiki.info/WebDevToolbar Link to comment Share on other sites More sharing options...
raghup Posted May 31, 2007 Author Share Posted May 31, 2007 thanks found similar one at javascript.internet.com/forms/multi-date-picker.htmli will see if i can use the replace the code to generate the calendar with the code to generate the grid and see if it works.will post the results.cheersraghu Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.