1. Home
  2. Categories
  3. Coding Question & Answers
  4. how to add Random pick and Reset buttons for a table (html - javascript)

how to add Random pick and Reset buttons for a table (html - javascript)

  • Michael Constantine

    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

    0
  • avan

    @Michael-Constantine

    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>
    0
  • avan

    @Michael-Constantine

    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>
    0
  • avan

    Hey @Michael-Constantine

    Just wondering, did this solution work for you?

    0
  • Michael Constantine

    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

    0
Log in to reply