0
Online
173
Users
134
Topics
385
Posts
Table "size" problem when adding or removing some cells
-
Hello there again, i have recently asked for some help in a table code it went very good, but there was a problem that i didn't noticed at the beginning .. in my original code, if i add or remove some cells from the table, the cell size still as it was, but in the modified code, as for a reason i can't understand, when i add or remove some cells from the table the rest of the cells change their sizes, they are like connected somehow to the table size, it's like if i add more cells to the table, all the cells become smaller to fit inside the table, and if i remove some of them they will be bigger to git inside the table size that i have chose, but in the original code if i add or remove some of them they just disappear and the table makes itself smaller !
this is the original code :<html> <head> <script> 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.target||e.srcElement; if(tdElm.style.backgroundColor == 'rgb(255, 0, 0)'){ tdElm.style.backgroundColor = '#fff'; } else { tdElm.style.backgroundColor = '#f00'; } } </script> </head> <body> <style> 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; } </style> <form> <table border width=''300'' height=''300'' cellspacing=''0'' cellpadding=''0'' align=center> <tr> <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> </tr> <tr> <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> </tr> <tr> <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> </tr> <tr> <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> </tr> <tr> <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> </tr> <tr> <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> </tr> <tr> <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> </tr> <tr> <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> </tr> <tr> <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> </tr> </table> </form> </body> </html>and this is the modified code
<html> <head> </head> <body> <style> td:hover, th:hover { background:#ff0000; 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:#ff0000; 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>of course, the code should stay as it is modified, but this problem that happened in it i can't figure it out !
thank you a lot in advance .
-
Hey @Michael-Constantine again,
No sure if I understand. But I think you have to pay attention to the width and height you have set here:
<table border width='250' height='250' cellspacing='0' cellpadding='0' align=center>So the table will always to stay within those dimensions regardless of how many cells you are adding or removing.
Do you want the cells to stay the same size? If so try to adjust the width and height every-time you adjust cell numbers. Hope this helps.
