how to add Random pick and Reset buttons for a table (html - javascript)
-
Hello there again, i have been working on a small project that i got help a lot here, but i need some more if you can please, i have this code, you can check it out to see what it does
<html> <head> <script> function inputClickHandler(e){ e = e||window.event; var tdElm = e.target||e.srcElement; if(tdElm.style.backgroundColor == 'rgb(63, 73, 109)'){ tdElm.style.backgroundColor = '#fff'; } else { tdElm.style.backgroundColor = '#3f496d'; } } </script> </head> <body> <style> td:hover, th:hover { background:#3f496d; color:#fff; } td:hover, th:hover { cursor:pointer } table { border-collapse: collapse; } table, tr, td { border: 1px solid black; } tr, td { padding: 4px; text-align: center; } table { border-spacing: 3px; border-collapse: separate; } .highlightRed { background:#3f496d; color:#fff; } </style> <form> <table border width='250' height='250' cellspacing='0' cellpadding='0' align=center> <tr> <td class="cell">01</td> <td class="cell">02</td> <td class="cell">03 </td> <td class="cell">04</td> <td class="cell">05 </td> <td class="cell">06</td> <td class="cell">07 </td> <td class="cell">08</td> <td class="cell">09 </td> <td class="cell">10</td> </tr> <tr> <td class="cell">11</td> <td class="cell">12</td> <td class="cell">13 </td> <td class="cell">14</td> <td class="cell">15 </td> <td class="cell">16</td> <td class="cell">17 </td> <td class="cell">18</td> <td class="cell">19 </td> <td class="cell">20</td> </tr> <tr> <td class="cell">21</td> <td class="cell">22</td> <td class="cell">23 </td> <td class="cell">24</td> <td class="cell">25 </td> <td class="cell">26</td> <td class="cell">27 </td> <td class="cell">28</td> <td class="cell">29 </td> <td class="cell">30</td> </tr> <tr> <td class="cell">31</td> <td class="cell">32</td> <td class="cell">33 </td> <td class="cell">34</td> <td class="cell">35 </td> <td class="cell">36</td> <td class="cell">37 </td> <td class="cell">38</td> <td class="cell">39 </td> <td class="cell">40</td> </tr> <tr> <td class="cell">41</td> <td class="cell">42</td> <td class="cell">43 </td> <td class="cell">44</td> <td class="cell">45 </td> <td class="cell">46</td> <td class="cell">47 </td> <td class="cell">48</td> <td class="cell">49 </td> <td class="cell">50</td> </tr> <tr> <td class="cell">51</td> <td class="cell">52</td> <td class="cell">53 </td> <td class="cell">54</td> <td class="cell">55 </td> <td class="cell">56</td> <td class="cell">57 </td> <td class="cell">58</td> <td class="cell">59 </td> <td class="cell">60</td> </tr> <tr> <td class="cell">61</td> <td class="cell">62</td> <td class="cell">63 </td> <td class="cell">64</td> <td class="cell">65 </td> <td class="cell">66</td> <td class="cell">67 </td> <td class="cell">68</td> <td class="cell">69 </td> <td class="cell">70 </td> </tr> <tr> <td class="cell">71</td> <td class="cell">72</td> <td class="cell">73 </td> <td class="cell">74</td> <td class="cell">75 </td> <td class="cell">76</td> <td class="cell">77 </td> <td class="cell">78</td> <td class="cell">79 </td> <td class="cell">80 </td> </tr> <tr> <td class="cell">81</td> <td class="cell">82</td> <td class="cell">83 </td> <td class="cell">84</td> <td class="cell">85 </td> <td class="cell">86</td> <td class="cell">87 </td> <td class="cell">88</td> <td class="cell">89 </td> <td class="cell">90 </td> </tr> </table> </form> <script> // Keeps track of all red cells let count = 0; // Get all cells let cells = document.querySelectorAll(".cell"); // Attach click event listener to all cells for(let i = 0; i < cells.length; i++){ let cell = cells[i]; cell.onclick = function() { // If cell has not been highlighted yet if(!cell.classList.contains('highlightRed')){ // If less than 6 cells have been highlighted as red, highlight // this cell red if(count < 6){ cell.classList.toggle("highlightRed"); count++; } // Cell is highlighted as RED. // Mark cell is whie and decrement count. }else { cell.classList.toggle("highlightRed"); count--; } }; } </script> </body> </html>
and you can check this link to see what i am trying to do so anyway, i still need to add two buttons (actually not a button, because i will add an icon instead of a button like a trash icon or any things else, a photo actually)one of them to UN-Highlight any amount of cells that i have highlighted and second one is to check some amount of cells to highlight them randomly, i don't know if i am allowed to ask here for such a things .. anyway i have tried .. thank u in advance
-
Again, this can accomplished with a little bit of JavaScript:
<html> <head> <script> function inputClickHandler(e){ e = e||window.event; var tdElm = e.target||e.srcElement; if(tdElm.style.backgroundColor == 'rgb(63, 73, 109)'){ tdElm.style.backgroundColor = '#fff'; } else { tdElm.style.backgroundColor = '#3f496d'; } } </script> </head> <body> <style> td:hover, th:hover { background:#3f496d; color:#fff; } td:hover, th:hover { cursor:pointer } table { border-collapse: collapse; } table, tr, td { border: 1px solid black; } tr, td { padding: 4px; text-align: center; } table { border-spacing: 3px; border-collapse: separate; } .highlightRed { background:#3f496d; color:#fff; } </style> <form> <table border width='250' height='250' cellspacing='0' cellpadding='0' align=center> <tr> <td class="cell">01</td> <td class="cell">02</td> <td class="cell">03 </td> <td class="cell">04</td> <td class="cell">05 </td> <td class="cell">06</td> <td class="cell">07 </td> <td class="cell">08</td> <td class="cell">09 </td> <td class="cell">10</td> </tr> <tr> <td class="cell">11</td> <td class="cell">12</td> <td class="cell">13 </td> <td class="cell">14</td> <td class="cell">15 </td> <td class="cell">16</td> <td class="cell">17 </td> <td class="cell">18</td> <td class="cell">19 </td> <td class="cell">20</td> </tr> <tr> <td class="cell">21</td> <td class="cell">22</td> <td class="cell">23 </td> <td class="cell">24</td> <td class="cell">25 </td> <td class="cell">26</td> <td class="cell">27 </td> <td class="cell">28</td> <td class="cell">29 </td> <td class="cell">30</td> </tr> <tr> <td class="cell">31</td> <td class="cell">32</td> <td class="cell">33 </td> <td class="cell">34</td> <td class="cell">35 </td> <td class="cell">36</td> <td class="cell">37 </td> <td class="cell">38</td> <td class="cell">39 </td> <td class="cell">40</td> </tr> <tr> <td class="cell">41</td> <td class="cell">42</td> <td class="cell">43 </td> <td class="cell">44</td> <td class="cell">45 </td> <td class="cell">46</td> <td class="cell">47 </td> <td class="cell">48</td> <td class="cell">49 </td> <td class="cell">50</td> </tr> <tr> <td class="cell">51</td> <td class="cell">52</td> <td class="cell">53 </td> <td class="cell">54</td> <td class="cell">55 </td> <td class="cell">56</td> <td class="cell">57 </td> <td class="cell">58</td> <td class="cell">59 </td> <td class="cell">60</td> </tr> <tr> <td class="cell">61</td> <td class="cell">62</td> <td class="cell">63 </td> <td class="cell">64</td> <td class="cell">65 </td> <td class="cell">66</td> <td class="cell">67 </td> <td class="cell">68</td> <td class="cell">69 </td> <td class="cell">70 </td> </tr> <tr> <td class="cell">71</td> <td class="cell">72</td> <td class="cell">73 </td> <td class="cell">74</td> <td class="cell">75 </td> <td class="cell">76</td> <td class="cell">77 </td> <td class="cell">78</td> <td class="cell">79 </td> <td class="cell">80 </td> </tr> <tr> <td class="cell">81</td> <td class="cell">82</td> <td class="cell">83 </td> <td class="cell">84</td> <td class="cell">85 </td> <td class="cell">86</td> <td class="cell">87 </td> <td class="cell">88</td> <td class="cell">89 </td> <td class="cell">90 </td> </tr> </table> </form> <button onclick="unselect()"> Un-Select All </button> <button onclick="random()"> Random Select </button> <script> // Keeps track of all red cells let count = 0; const MAX = 6; function unselect(){ let cells = document.querySelectorAll(".cell"); // Attach click event listener to all cells for(let i = 0; i < cells.length; i++){ let cell = cells[i]; if(cell.classList.contains('highlightRed')){ cell.classList.toggle("highlightRed"); } } count = 0; } function random(){ unselect(); let cells = document.querySelectorAll(".cell"); let pickedAlready = []; for (let i = 0; i < MAX; i++){ let random = Math.floor(Math.random() * cells.length); while(pickedAlready.includes(random)){ random = Math.floor(Math.random() * cells.length); } let cell = cells[random]; cell.classList.toggle("highlightRed"); pickedAlready.push(random); count++; } } // Get all cells let cells = document.querySelectorAll(".cell"); // Attach click event listener to all cells for(let i = 0; i < cells.length; i++){ let cell = cells[i]; cell.onclick = function() { // If cell has not been highlighted yet if(!cell.classList.contains('highlightRed')){ // If less than 6 cells have been highlighted as red, highlight // this cell red if(count < MAX){ cell.classList.toggle("highlightRed"); count++; } // Cell is highlighted as RED. // Mark cell is whie and decrement count. }else { cell.classList.toggle("highlightRed"); count--; } }; } </script> </body> </html>
-
Again, this can accomplished with a little bit of JavaScript:
<html> <head> <script> function inputClickHandler(e){ e = e||window.event; var tdElm = e.target||e.srcElement; if(tdElm.style.backgroundColor == 'rgb(63, 73, 109)'){ tdElm.style.backgroundColor = '#fff'; } else { tdElm.style.backgroundColor = '#3f496d'; } } </script> </head> <body> <style> td:hover, th:hover { background:#3f496d; color:#fff; } td:hover, th:hover { cursor:pointer } table { border-collapse: collapse; } table, tr, td { border: 1px solid black; } tr, td { padding: 4px; text-align: center; } table { border-spacing: 3px; border-collapse: separate; } .highlightRed { background:#3f496d; color:#fff; } </style> <form> <table border width='250' height='250' cellspacing='0' cellpadding='0' align=center> <tr> <td class="cell">01</td> <td class="cell">02</td> <td class="cell">03 </td> <td class="cell">04</td> <td class="cell">05 </td> <td class="cell">06</td> <td class="cell">07 </td> <td class="cell">08</td> <td class="cell">09 </td> <td class="cell">10</td> </tr> <tr> <td class="cell">11</td> <td class="cell">12</td> <td class="cell">13 </td> <td class="cell">14</td> <td class="cell">15 </td> <td class="cell">16</td> <td class="cell">17 </td> <td class="cell">18</td> <td class="cell">19 </td> <td class="cell">20</td> </tr> <tr> <td class="cell">21</td> <td class="cell">22</td> <td class="cell">23 </td> <td class="cell">24</td> <td class="cell">25 </td> <td class="cell">26</td> <td class="cell">27 </td> <td class="cell">28</td> <td class="cell">29 </td> <td class="cell">30</td> </tr> <tr> <td class="cell">31</td> <td class="cell">32</td> <td class="cell">33 </td> <td class="cell">34</td> <td class="cell">35 </td> <td class="cell">36</td> <td class="cell">37 </td> <td class="cell">38</td> <td class="cell">39 </td> <td class="cell">40</td> </tr> <tr> <td class="cell">41</td> <td class="cell">42</td> <td class="cell">43 </td> <td class="cell">44</td> <td class="cell">45 </td> <td class="cell">46</td> <td class="cell">47 </td> <td class="cell">48</td> <td class="cell">49 </td> <td class="cell">50</td> </tr> <tr> <td class="cell">51</td> <td class="cell">52</td> <td class="cell">53 </td> <td class="cell">54</td> <td class="cell">55 </td> <td class="cell">56</td> <td class="cell">57 </td> <td class="cell">58</td> <td class="cell">59 </td> <td class="cell">60</td> </tr> <tr> <td class="cell">61</td> <td class="cell">62</td> <td class="cell">63 </td> <td class="cell">64</td> <td class="cell">65 </td> <td class="cell">66</td> <td class="cell">67 </td> <td class="cell">68</td> <td class="cell">69 </td> <td class="cell">70 </td> </tr> <tr> <td class="cell">71</td> <td class="cell">72</td> <td class="cell">73 </td> <td class="cell">74</td> <td class="cell">75 </td> <td class="cell">76</td> <td class="cell">77 </td> <td class="cell">78</td> <td class="cell">79 </td> <td class="cell">80 </td> </tr> <tr> <td class="cell">81</td> <td class="cell">82</td> <td class="cell">83 </td> <td class="cell">84</td> <td class="cell">85 </td> <td class="cell">86</td> <td class="cell">87 </td> <td class="cell">88</td> <td class="cell">89 </td> <td class="cell">90 </td> </tr> </table> </form> <button onclick="unselect()"> Un-Select All </button> <button onclick="random()"> Random Select </button> <script> // Keeps track of all red cells let count = 0; const MAX = 6; function unselect(){ let cells = document.querySelectorAll(".cell"); // Attach click event listener to all cells for(let i = 0; i < cells.length; i++){ let cell = cells[i]; if(cell.classList.contains('highlightRed')){ cell.classList.toggle("highlightRed"); } } count = 0; } function random(){ unselect(); let cells = document.querySelectorAll(".cell"); let pickedAlready = []; for (let i = 0; i < MAX; i++){ let random = Math.floor(Math.random() * cells.length); while(pickedAlready.includes(random)){ random = Math.floor(Math.random() * cells.length); } let cell = cells[random]; cell.classList.toggle("highlightRed"); pickedAlready.push(random); count++; } } // Get all cells let cells = document.querySelectorAll(".cell"); // Attach click event listener to all cells for(let i = 0; i < cells.length; i++){ let cell = cells[i]; cell.onclick = function() { // If cell has not been highlighted yet if(!cell.classList.contains('highlightRed')){ // If less than 6 cells have been highlighted as red, highlight // this cell red if(count < MAX){ cell.classList.toggle("highlightRed"); count++; } // Cell is highlighted as RED. // Mark cell is whie and decrement count. }else { cell.classList.toggle("highlightRed"); count--; } }; } </script> </body> </html>
-
Just wondering, did this solution work for you?
-
Very sorry for not answering, yes of course it did worked, allow me to say you are a real master and thank you a lot