can't show/hide a table column in responsive mode

Question

I have a problem with the button there are not working. When clicking on the button it is supposed to show another column and hide the others for mobile view. I tried it with JavaScript and add onclick function but its the same it does not show the other column. for example when clicking the button number 2 it should hide column with class second-column,forth-column,fifth-column and show column third-column

In the code you will see I used javascript and also css and none works

function myFun(){
        
        document.getElementsByClassName("second-column").style.display="block";
        document.getElementsByClassName("third-column").style.display="none";
        document.getElementsByClassName("forth-column").style.display="none";
        document.getElementsByClassName("fifth-column").style.display="none";
        
    }
    
        function myFunc(){
        
        document.getElementsByClassName("second-column").style.display="none";
        document.getElementsByClassName("third-column").style.display="block";
        document.getElementsByClassName("forth-column").style.display="none";
        document.getElementsByClassName("fifth-column").style.display="none";
        
    }
    
function myFunct(){
        
        document.getElementsByClassName("second-column").style.display="none";
        document.getElementsByClassName("third-column").style.display="none";
        document.getElementsByClassName("forth-column").style.display="block";
        document.getElementsByClassName("fifth-column").style.display="none";
        
    }
    
        function myFuncti(){
        
        document.getElementsByClassName("second-column").style.display="none";
        document.getElementsByClassName("third-column").style.display="none";
        document.getElementsByClassName("forth-column").style.display="none";
        document.getElementsByClassName("fifth-column").style.display="block";
        
    }

@media all and (max-width:900px) {
  .table {
    width: 100%;
  }
  .second-column {
    width: 50%;
  }
  .space {
    display: none;
  }
  .third-column {
    display: none;
  }
  .forth-column {
    display: none;
  }
  .fifth-column {
    display: none;
  }
  .table.fixed {
    table-layout: fixed;
  }
  td:first-child {
    width: 50%;
  }
  .btn-div {
    display: block !important;
  }
  #btn-1:focus~.second-column {
    display: block!important;
  }
  #btn-1:focus~.third-column,
  .forth-column,
  .fifth-column {
    display: none!important;
  }
  #btn-2:focus~.third-column {
    display: block!important;
  }
  #btn-2:focus~.second-column,
  .forth-column,
  .fifth-column {
    display: none!important;
  }
  #btn-3:focus~.forth-column {
    display: block!important;
  }
  #btn-3:focus~.second-column,
  .third-column,
  .fifth-column {
    display: none!important;
  }
  #btn-4:focus~.fifth-column {
    display: block!important;
  }
  #btn-4:focus~.second-column,
  .third-column,
  .forth-column {
    display: none!important;
  }
}

<div>
  <table class="table fixed">
    <tr>
      <th style="border-bottom: none;"></th>
      <th class="space"></th>
      <th class="second-column">111</th>
      <th class="third-column">222 </th>
      <th class="forth-column">333 </th>
      <th class="fifth-column">444 </th>
    </tr>
    <tr>
      <td> !</td>
      <td class="space"></td>
      <td class="second-column"> 1</td>
      <td class="third-column"> 2</td>
      <td class="forth-column"> 3</td>
      <td class="fifth-column">4</td>
    </tr>
    <tr>
      <td> %</td>
      <td class="space"></td>
      <td class="second-column"> 1</td>
      <td class="third-column"> 2</td>
      <td class="forth-column"> 3</td>
      <td class="fifth-column"> 4</td>
    </tr>
    <tr>
      <td>$</td>
      <td class="space"></td>
      <td class="second-column"> 1</td>
      <td class="third-column">2</td>
      <td class="forth-column"> 3</td>
      <td class="fifth-column"> 4</td>
    </tr>
    <tr>
      <td> @</td>
      <td class="space"></td>
      <td class="second-column"> 1</td>
      <td class="third-column"> 2</td>
      <td class="forth-column"> 3</td>
      <td class="fifth-column"> 4</td>
    </tr>
    <tr>
      <td> #</td>
      <td class="space"></td>
      <td class="second-column"> 1</td>
      <td class="third-column">2</td>
      <td class="forth-column"> 3</td>
      <td class="fifth-column"> 4</td>
    </tr>
    <tr>
      <td>$$ </td>
      <td class="space"></td>
      <td class="second-column"> 1</td>
      <td class="third-column"> 2</td>
      <td class="forth-column"> 3</td>
      <td class="fifth-column">4</td>
    </tr>
  </table>
  <div style="text-align: center;display: none;" class="btn-div">
 <button type="button" class="this-btn add-add" id="btn-1" onClick="myFun()">1</button>
 <button type="button" class="this-btn add-add" id="btn-2" onClick="myFunc()">2</button>
 <button type="button" class="this-btn add-add"id="btn-3" onClick="myFunct()" >3</button>
<button type="button" class="this-btn add-add" id="btn-4" onClick="myFuncti()">4</button>
  </div>
</div>

@kmoser I added the javascript code. previously i used css. Both don't work for me — Ghezlan AL-Nofly, Oct 28 '20 at 17:22
`getElementsByClassName()` returns an [HTMLCollection](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection), not a single DOM element. You must [loop through each element](https://stackoverflow.com/questions/22754315/for-loop-for-htmlcollection-elements). — kmoser, Oct 28 '20 at 17:35

score 0 · Answer 1 · answered Oct 29 '20 at 15:40

I knew the problem. when using getElementsByClassName() it returns html Collection. So it combine all element in node list so if I want to access a certain element i should use the index number of that element. For example:

document.getElementsByClassName('second-column')[0].style.display="none";

but if you want to change or access all elements then you should use loops

this solves my problem:

function myFun(){
        
        [...document.getElementsByClassName("second-column")].forEach(e => e.style.display = "table-cell");
        [...document.getElementsByClassName("third-column")].forEach(e => e.style.display = "none");
        [...document.getElementsByClassName("forth-column")].forEach(e => e.style.display = "none");
        [...document.getElementsByClassName("fifth-column")].forEach(e => e.style.display = "none");
        
    }

Or this way:

var x = document.getElementsByClassName('third-column');
for (var i = 0; i < x.length; i++) {
    x[i].style.display = "none";
}

and repeat it for every class Name

can't show/hide a table column in responsive mode

1 Answers1