Click here to Skip to main content
15,918,976 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hello there, i have almost completed my code, still have one more small step, check my code please to see what it is

window.onload = function(){

    var all = document.getElementsByTagName("td");
    for (var i=0;i<all.length;i++) {
        all[i].onclick = inputClickHandler;       

function inputClickHandler(e){
    e = e||window.event;
    var tdElm =||e.srcElement;
    if( == 'rgb(255, 0, 0)'){ = '#fff';
    } else { = '#f00';




td:hover, th:hover { cursor:pointer }

table {
  border-collapse: collapse;
table, tr, td {
  border: 1px solid black;
tr, td {
  padding: 7px;
  text-align: center;

table { 
    border-spacing: 3px;
    border-collapse: separate;


<table border width=''500'' height=''500'' cellspacing=''0'' cellpadding=''0'' align=center>

<td >01</td>
<td >02</td>
<td >03 </td>
<td >04</td>
<td >05 </td>
<td >06</td>
<td >07 </td>
<td >08</td>
<td >09 </td>
<td >10</td>

<td >11</td>
<td >12</td>
<td >13 </td>
<td >14</td>
<td >15 </td>
<td >16</td>
<td >17 </td>
<td >18</td>
<td >19 </td>
<td >20</td>

<td >21</td>
<td >22</td>
<td >23 </td>
<td >24</td>
<td >25 </td>
<td >26</td>
<td >27 </td>
<td >28</td>
<td >29 </td>
<td >30</td>

<td >31</td>
<td >32</td>
<td >33 </td>
<td >34</td>
<td >35 </td>
<td >36</td>
<td >37 </td>
<td >38</td>
<td >39 </td>
<td >40</td>

<td >41</td>
<td >42</td>
<td >43 </td>
<td >44</td>
<td >45 </td>
<td >46</td>
<td >47 </td>
<td >48</td>
<td >49 </td>
<td >50</td>

<td >51</td>
<td >52</td>
<td >53 </td>
<td >54</td>
<td >55 </td>
<td >56</td>
<td >57 </td>
<td >58</td>
<td >59 </td>
<td >60</td>

<td >61</td>
<td >62</td>
<td >63 </td>
<td >64</td>
<td >65 </td>
<td >66</td>
<td >67 </td>
<td >68</td>
<td >69 </td>
<td >70</td>

<td >71</td>
<td >72</td>
<td >73 </td>
<td >74</td>
<td >75 </td>
<td >76</td>
<td >77 </td>
<td >78</td>
<td >79 </td>
<td >80</td>

<td >81</td>
<td >82</td>
<td >83 </td>
<td >84</td>
<td >85 </td>
<td >86</td>
<td >87 </td>
<td >88</td>
<td >89 </td>
<td >90</td>


it is nice as you see, but can you help by telling me, how can show the numbers that are clicked in the table under the table somewhere ?! for example, if i click on number 1 so under the table number one will show and if i click on number 2 it will show as will, so number 1 will not disappear, but they should have Space between them or "," or whatever .. thank you wish you the best

What I have tried:

i have tried a lot to do it myself and search here and in many other websites
Updated 21-Feb-20 1:16am

1 solution

Have an array on your page like

var numbers = [];

you can get the contents of the td you have clicked on via


In the code where you select a number, add it to the numbers array


In the code where you clear a value, remove it from the array (google "javascript remove from array")

That gives you an array of all selected numbers, so use "join" to combine them to a string and show that string in a textbox, or anywhere else you want.

To preempt your next question, no I won't write the code for you, this isn't a code to order website where we do your work, but if you piece the above elements together you should have a solution.
Share this answer
MichaelConsta 21-Feb-20 7:21am    
I see, yes thanks for the help, by the way the quote says like this
("Give a man a fish and you feed him for a day; teach a man to fish and you feed him for a lifetime") but it doesn't say show that man that you know how to fish .. thank again

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900