Show/Hide HTML Table Columns using SELECT option

Question

I have the attached table with a SELECT option for Viewing options(it currently does nothing)

In adition to always showing the first 5 columns, I need to Show just the "Each" columns if the user choses Each(Hide all Total columns), Show just the "Total" columns if the user choses Total(Hide all Each columns), if users choose Both, the default view is Each and Totals.

When a user clicks either option, the first Header row needs to adapt to the view of the table i.e the numbers will always need to show if users choose Both/Each/Total so they know the event for each cost

https://jsfiddle.net/Snorlaxx/rfdk7utw/29/







 
      

    
 
      
  

  
    
      PACKAGE
      NIGHTS
      PEOPLE
      RAW
      SD
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
    
    
    Each
    Total
    Each
    Total
    Each
    Total
    Each
    Total
    Each
    Total
    Each
    Total
    Each
    Total
    Each
    Total
    Each
    Total
    Each
    Total
    Each
    Total
    Each
    Total
    Each
    Total
    Each
    Total
    Each
    Total
    Each
    Total
    Each
    Total
    
  
  

      Bronze        3         1        Not Inc       Not Inc        --        --         --        --         --        --         --        --         --        --         --        --         --        --         --        --         --        --         --        --         --        --         --        --         $1,225        $1,225         --        --         --        --        $2,080        $2,080         --        --     
      Silver / 3 Nights         3         3        Not Inc       Not Inc        $550          $1,650         $614          $1,842         $746          $2,238         $614          $1,842         $614          $1,842         $760          $2,280         $562          $1,686         $542          $1,626         $748          $2,244         $950          $2,850         $865          $2,595         $950          $2,850         $1,150        $3,450         $1,050        $3,150         $1,275        $3,825        $1,480        $4,440         $1,680        $5,040     
      Gold / 4 Nights / Raw  - 100 Level        4         3        100 Level         Not Inc        --        --         --        --         --        --         --        --         --        --         --        --         --        --         $894          $2,682         $1,233        $3,699         $1,765        $5,295         $1,385        $4,155         $1,400        $4,200         $1,475        $4,425         $1,675        $5,025         $1,800        $5,400        $2,050        $6,150         $2,310        $6,930

Swati · Accepted Answer

As on change of view select-box whole structure of table will get change so it would be good to create different function for same.

Explanation :

In below code inside filter1 function first i have check if value of select-box is not BOTH or Select View if yes i have first hide all td which is greater then 4 because according to your html structure changes(hide or show) need to be done after 4th column.Then, i have loop through 2nd tr using $("table tr:eq(1) th ").each(.. as index start from 0 so that's why tr:eq(1).

If the value inside th matches with view select then show that th then using class which i have added in your html structure i.e : class="21"..etc i have removed colspan from that th.Now , to show only td which has data-column="selectvalue" use $("tr td[data-column*=" + $(this).text() + "]").show() . I have added comments to code so it would be easy to understand.

Demo Code :

function filter() {
  var filter_num_package = document.getElementById("myInput").value.toUpperCase().trim();
  var filter_num_nights = document.getElementById("myInput1").value.toUpperCase().trim();

  var filter_num_people = document.getElementById("myInput2").value.toUpperCase().trim();
  //loop through tr
  $(" tbody tr").each(function() {
    //get td value 0,1,2
    var first_td = $(this).find("td:eq(0)").text().toUpperCase().trim()
    var second_td = $(this).find("td:eq(1)").text().toUpperCase().trim()
    var third_td = $(this).find("td:eq(2)").text().toUpperCase().trim()

    //check if value matches
    if (first_td.includes(filter_num_package) &&
      second_td.includes(filter_num_nights) &&
      third_td.includes(filter_num_people)) {
      //display that row
      $(this).css("display", "");
    } else {
      //hide that row
      $(this).css("display", "none");
    }
  })
}

function filter1() {
  //get value of last select
  var values = document.getElementById("myInput3").value.toUpperCase().trim();
  //check if value is not both or first option
  if (values != "BOTH" && values != "") {
    //hide all td which are greater then 4
    $("tr").find("td:gt(4)").hide()
    //loop through second tr > th
    $("table tr:eq(1) th ").each(function() {
      //check if the text is equal to selct value
      if ($(this).text().toUpperCase().trim() === values) {
        //show that th
        $(this).show();
        //get class 21,22..etc
        var class_to_hide = $(this).attr('class');
        //check th has value 21,22..etc remove colspan
        $("tr").find("th:contains(" + class_to_hide + ")").attr("colspan", "")
        //check td which has select option
        $("tr td[data-column*=" + $(this).text() + "]").show()
      } else {
        //hide the th
        $(this).hide();
      }
    })
  } else {
    //show 2nd tr > ths 
    $("table tr:eq(1) th ").show()
    //show all td which is > 4
    $("tr").find("td:gt(4)").show()
    //add colspan again
    $("tr:eq(0)").find("th:gt(4)").attr("colspan", "2")
  }
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  text-align: left;
  width: 21%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
}

#myInput1 {
  background-image: url('/css/searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 21%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
}

#myInput2 {
  background-image: url('/css/searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 21%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
}

#myInput3 {
  background-image: url('/css/searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 21%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
}

table {
  width: 85%;
  border-collapse: collapse;
  margin: 10px auto;
  font-family: Arial, Helvetica, sans-serif;
}


/* Zebra striping */

tr:nth-of-type(odd) {
  background: #eee;
}

th {
  background: #0B6FA4;
  color: white;
  font-size: 15px;
  font-weight: bold;
  text-align: centre;
  padding: 2px;
  border: 1px solid #ccc;
}

td {
  padding: 10px;
  border: 1px solid #ccc;
  text-align: centre;
  font-size: 15px;
}


/*

Max width before this PARTICULAR table gets nasty

This query will take effect for any screen smaller than 760px

and also iPads specifically.

*/

@media only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
  table {
    width: 100%;
  }
  /* Force table to not be like tables anymore */
  table,
  thead,
  tbody,
  th,
  td,
  tr {
    display: block;
  }
  /* Hide table headers (but not display: none;, for accessibility) */
  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  tr {
    border: 1px solid #ccc;
  }
  td {
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50%;
  }
  td:before {
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 6px;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    /* Label the data */
    content: attr(data-column);
    color: #000;
    font-weight: bold;
  }



  
  
  
  
  
    
      
        PACKAGE
        NIGHTS
        PEOPLE
        RAW
        SD
        20
        21
        22
        23
        24
        25
        26
        27
        28
        29
        30
        31
        32
        33
        34
        35
        36
      
      
        
        Each
        Total
        Each
        Total
        Each
        Total
        Each
        Total
        Each
        Total
        Each
        Total
        Each
        Total
        Each
        Total
        Each
        Total
        Each
        Total
        Each
        Total
        Each
        Total
        Each
        Total
        Each
        Total
        Each
        Total
        Each
        Total
        Each
        Total
      
    
    
      
         Bronze 
         3 
         1 
         Not Inc 
         Not Inc 
         -- 
         -- 
         -- 
         -- 
         -- 
         -- 
         -- 
         -- 
         -- 
         -- 
         -- 
         -- 
         -- 
         -- 
         -- 
         -- 
         -- 
         -- 
         -- 
         -- 
         -- 
         -- 
         -- 
         -- 
         $1,225 
         $1,225 
         -- 
         -- 
         -- 
         -- 
         $2,080 
         $2,080 
         -- 
         -- 
      
      
         Silver / 3 Nights 
         3 
         3 
         Not Inc 
         Not Inc 
         $550 
         $1,650 
         $614 
         $1,842 
         $746 
         $2,238 
         $614 
         $1,842 
         $614 
         $1,842 
         $760 
         $2,280 
         $562 
         $1,686 
         $542 
         $1,626 
         $748 
         $2,244 
         $950 
         $2,850 
         $865 
         $2,595 
         $950 
         $2,850 
         $1,150 
         $3,450 
         $1,050 
         $3,150 
         $1,275 
         $3,825 
         $1,480 
         $4,440 
         $1,680 
         $5,040 
      
      
         Gold / 4 Nights / Raw - 100 Level 
         4 
         3 
         100 Level 
         Not Inc 
         -- 
         -- 
         -- 
         -- 
         -- 
         -- 
         -- 
         -- 
         -- 
         -- 
         -- 
         -- 
         -- 
         -- 
         $894 
         $2,682 
         $1,233 
         $3,699 
         $1,765 
         $5,295 
         $1,385 
         $4,155 
         $1,400 
         $4,200 
         $1,475 
         $4,425 
         $1,675 
         $5,025 
         $1,800 
         $5,400 
         $2,050 
         $6,150 
         $2,310 
         $6,930

Show/Hide HTML Table Columns using SELECT option

Answers (1)

Related Questions