CODEWITHSUNDEEP
javascripthtmlcss
IntJ
IntJ

Reputation: 23

Split Columns into Sections

How do I go about splitting whole columns into sections:

What I want to achieve in the end is to show/hide the column section based on a button using javascript.

The code:

<table>
  <tr>
    <th>Number</th> <!-- This column is meant to be shown -->   
    <th>Shown Content</th>    <!-- This column is meant to be shown --> 
    <th>Hidden Content</th>    <!-- This column is meant to be hidden -->
    <th>Action</th> <!-- This column is meant to be shown -->   
  </tr>

  <tr>
    <td>1</td>          <!-- This column is meant to be shown -->   
    <td>Shown</td>      <!-- This column is meant to be shown -->
    <td>Hidden</td>     <!-- This column is meant to be hidden -->
    <td><form action='action'><button>VIEW</button></form></td> <!-- This column is meant to be shown -->
  </tr>

</table>

Upvotes: 0

Views: 211

Answers (3)

vol7ron
vol7ron

Reputation: 42095

Explained:

  • On button click, call the toggle function
  • Assume any arguments you pass to it are the column numbers; this will need to be amended if you have other requirements (like a range of numbers)
  • Using the nth-child you're able to select those header and data elements of the supplied column number
  • Look at the first one to see if it already has hidden. This is performed outside the loop because you don't need to check each element, just one since you're applying the class to all the elements
  • Once you have the set of data (stored in col), iterate over them and either add or remove the class. CSS is responsible for hiding

Caveats:

This code is heavily reliant on ES6, it can be converted, but you should be especially careful of:

  • the arrow functions (=>)
  • backticks for string interpolation (`${variable}`)
  • the array spread operator [...obj]

function toggle() {
  let className = 'hidden';
  [...arguments].forEach(num => {

    var selector = `th:nth-child(${num}), td:nth-child(${num})`,
      col = document.querySelectorAll(selector),
      add = !col[0].classList.contains(className);

    col.forEach(td => {
      add ? td.classList.add(className) : td.classList.remove(className);
    });
  });
}
.hidden {
  display: none;
}
<table>
  <tr>
    <th>Number</th>
    <!-- This column is meant to be shown -->
    <th>Shown Content</th>
    <!-- This column is meant to be shown -->
    <th>Hidden Content</th>
    <!-- This column is meant to be hidden -->
    <th>Action</th>
    <!-- This column is meant to be shown -->
  </tr>

  <tr>
    <td>1</td>
    <!-- This column is meant to be shown -->
    <td>Shown</td>
    <!-- This column is meant to be shown -->
    <td>Hidden</td>
    <!-- This column is meant to be hidden -->
    <td>
      <form action='action'><button>VIEW</button></form>
    </td>
    <!-- This column is meant to be shown -->
  </tr>

</table>

<button onclick="toggle(1,3)">Toggle</button>

Upvotes: 2

Chinito
Chinito

Reputation: 1175

this to show/hide a column in a specific row

function toggle(){
  var header = document.getElementById('headerHide');
  var parent = document.getElementById('first');
  var sub = parent.querySelector('#hide');
  var btn = parent.querySelector('#btn');
  
  if(sub.style.display == 'none'){
    sub.style.display = 'block';
    header.style.display = 'block';
    btn.innerHTML = "HIDE";
  }
  else{
    sub.style.display = 'none';
    header.style.display = 'none';
    btn.innerHTML = "VIEW";
  }
}
<table>
  <tr>
    <th>Number</th> <!-- This column is meant to be shown -->   
    <th id="headerShow">Shown Content</th>    <!-- This column is meant to be shown --> 
    <th id="headerHide" style="display:none;">Hidden Content</th>    <!-- This column is meant to be hidden -->
    <th>Action</th> <!-- This column is meant to be shown -->   
  </tr>

  <tr id="first">
    <td>1</td>          <!-- This column is meant to be shown -->   
    <td id="show">Shown</td>      <!-- This column is meant to be shown -->
    <td id="hide" style="display:none;">Hidden</td>     <!-- This column is meant to be hidden -->
    <td><form action='something' style='display:inline'><button onclick="toggle()" id="btn">VIEW</button></form></td> <!-- This column is meant to be shown -->
  </tr>

</table>

Upvotes: 0

Mindless
Mindless

Reputation: 2357

One line of jQuery

$("#hide").on("click", function() {
  //hide third column with header, you can add more columns if you wish
  $('td:nth-child(3),th:nth-child(3)').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Number</th>
    <!-- This column is meant to be shown -->
    <th>Shown Content</th>
    <!-- This column is meant to be shown -->
    <th>Hidden Content</th>
    <!-- This column is meant to be hidden -->
    <th>Action</th>
    <!-- This column is meant to be shown -->
  </tr>

  <tr>
    <td>1</td>
    <!-- This column is meant to be shown -->
    <td>Shown</td>
    <!-- This column is meant to be shown -->
    <td>Hidden</td>
    <!-- This column is meant to be hidden -->
    <td>
      <form action='action'><button>VIEW</button></form>
    </td>
    <!-- This column is meant to be shown -->
  </tr>

</table>

<button id="hide">Hide Third Column</button>

Upvotes: 0

Related Questions