Skip to content Skip to sidebar Skip to footer
Home / Html / Javascript / Scripting / Web

Hide And Show Html Table Columns

Post a Comment
can anyone help to solve this html/javaScript issue; iam tying to implement a solution to hide/show columns in my html table that has a header with multi-rows, when i start hiding

Solution 1:

It looks like a CSS problem. If you change .hide-col to use display: none; it works fine. Unfortunately, hiding table cells using other methods causes them to misalign with other rows. It may still be possible to achieve the animation with jQuery, by setting display: none after the animation is over.

In this example, the code has also been adjusted slightly to update the colspan of very wide columns (using class bigcolspan): https://jsfiddle.net/apecgwh9/1/

$(function() {
 
  // on init
  $('.hide-column').eq(0).trigger( "click" );
  
   // on click
  $('.hide-column').click(HideColumns);
  
  $('.bigcolspan').each(function(index) {
    $(this).data('colspan', $(this).attr('colspan'));
  });
  
  functionHideColumns() {
    var $el = $(this);
    var $cell = $el.closest('th,td')
    var $table = $cell.closest('table')

    var colIndex = 0;
    var colSpan = 0;

    $cell.parent().children().each(function(index) {
      if ($(this).is($cell)) {
        colSpan = parseInt($cell.attr("colspan") || 1);
        returnfalse;
      } else {
        colIndex += parseInt($(this).attr("colspan") || 1);
      };
    });

    // find and hide col indexfor (var i = colIndex; i < (colIndex + colSpan); i++) {
      $table.find("tbody tr, thead :nth-child(4)")
        .children(":nth-child(" + (i + 1) + ")")
        .addClass('hide-col');
    };
    
    //adjust colspan of top rows
    $('.bigcolspan').each(function(index) {
        $(this).attr('colspan', parseInt($(this).attr('colspan'))-colSpan);
    });
    
    //always show first header
    $table.find("thead :nth-child(1)").children().removeClass('hide-col');
    
    //hide clicked cell
    $cell.addClass('hide-col');

    // show restore footer
    $table.find(".footer-restore-columns").show()
  }

  // restore columns footer
  $(".restore-columns").click(function(e) {
    var $table = $(this).closest('table')
    $table.find(".footer-restore-columns").hide()
    $table.find("th, td")
      .removeClass('hide-col');

    $('.bigcolspan').each(function(index) {
        $(this).attr('colspan', $(this).data('colspan'));
    });
  })


  $('[data-toggle="tooltip"]').tooltip({
    trigger: 'hover'
  })

})
body, html {
  height: 100%;
  overflow: hidden;
    }

#right {
  height: 100%;
    }

table, th, td {
border: 1px solid black;  // changing-colors
// word-wrap: break-word;

}

tr:first-child {
  font-weight: normal;
}

tr:nth-child(even) {background: #eef}  // changing-colors
tr:nth-child(odd) {background: #fee}   // changing-colors

* {
  box-sizing: border-box;
}



#myTable {
  border-collapse: separate;
  border: 1px solid #ddd;  // changing-colors
  width: 100%;
  margin-top: 18px;
  // Remove the // in front of the below two lines, to get fixed-width
  // table-layout: fixed;
  // word-wrap: break-word;
   font-size: 10.5px;
   font-family: arial;
     
}

#myTableth, #myTabletd {
  text-align: left;
  padding: 12px;
}


#myTabletr {
  border-bottom: 1px solid #ddd;  // changing-colors
}

#myTabletr:first-child:hover, #myTabletr:hover {
  #background-color: Greylight;    // changing-colors
}

#myTabletr:first-child {
  background-color: #FFFFFF;    // changing-colors
  font-weight: bold;
}

.table-fixed {
  width: 100%;
}

/*This will work on every browser*/.table-fixedthead  {
    position: sticky;
    position: -webkit-sticky;   
    top: 0;
    z-index: 999;
    background-color: #ddd;
    color: black;
}

theadtr:nth-child(1) th  {
    position: sticky;
    position: -webkit-sticky;   
    top: 0px;
    z-index: 999;
    background-color: white;
    color: black;
}
theadtr:nth-child(2) th  {
    position: sticky;
    position: -webkit-sticky;   
    top: 30px;
    z-index: 999;
    background-color: teal;
    color: black;
}
theadtr:nth-child(3) th  {
    position: sticky;
    position: -webkit-sticky;   
    top: 66px;
    z-index: 999;
    background-color: white;
    color: black;
}
theadtr:nth-child(4) th  {
    position: sticky;
    position: -webkit-sticky;   
    top: 110px;
    z-index: 999;
    background-color: white;
    color: black;
}

.tscroll {
  width: 100%;
  height: 80%;
  overflow-x: scroll;
  overflow-y: scroll;
  margin-bottom: 10px;
  
}

.tscrolltabletd:first-child {
  position: sticky;
  left: 0;
  background-color: #FFFFFF;
  font-weight: bold;
}

.tscrolltd, .tscrollth {
  //border-bottom: dashed #8881px;
}



th.yellow {
  background: #DAA520;
  color: white;
}

th.bluesky {
  background: #B0E0E6;
  color: black;
}

th.skyblue  {
  background: #87CEEB;
  color: black;
}

th.blue  {
  background: #4682B4;
  color: black;
}

th.NO {
  background: white;
  color: black;
}

th.green {
  background: #40A497;
  color: black;
}
 
th.pink {
  background: #FFC0CB;
  color: black;
}
th.darkcyan {
  background: #008B8B;
  color: white;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  bottom:0;
  width:100%;
  overflow: hidden;

}

li {
 // float: left;
 // border-right:1px solid #bbb;
}

li:last-child {
 // border-right: none;

}

lia {
 // display: BLOCK;
 // color: black;
 // text-align: center;
 // padding: 12px ;
 // text-decoration: none;
//  font-size: 12px;
//  line-height:0.8;
}


body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
}



.tscrollth:first-child {
  overflow-x: auto;
  position: sticky;
  left: 0;
  //parent opacity: 100%;
  z-index: 1000;

}

.red {color:red}
.orange {color:orange}
.green {color:green}

/* use class to have a little animation */.hide-col {
  width: 0px!important;
  height: 0px!important;
  display: none !important;
  overflow: hidden !important;
  margin: 0!important;
  padding: 0!important;
  border: none !important;
}
<!DOCTYPE html><html><head><scriptsrc="https://code.jquery.com/jquery-1.7.2.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script><metaname="viewport"content="width=device-width, initial-scale=1"charset="ISO-8859-1"><linkhref="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><title>QoR_results_summary</title><styletype="text/css"></style></head><body><br><br><imgalign="left"src="logo.jpg"height="8%"width="auto"hspace="50"></br></br></br></br><divclass="tscroll"><tableid="myTable"class="table-fixed"><thead><tr><thclass="NO">&nbsp;</th><thclass="NO">&nbsp;</th><thclass="NO">&nbsp;</th><thclass="NO">&nbsp;</th><thclass="bigcolspan"colspan="43">IMP</th></tr><tr><thclass="NO">&nbsp;</th><thclass="NO">&nbsp;</th><thclass="NO">&nbsp;</th><thclass="NO">&nbsp;</th><thclass="bigcolspan darkcyan"colspan="43">SYN</th></tr><tr><thclass="NO">&nbsp;</th><thclass="NO">&nbsp;</th><thclass="NO">&nbsp;</th><thclass="NO">&nbsp;</th><thclass="lightgray"colspan="3"><buttonclass="pull-right btn btn-default hide-column"data-toggle="tooltip"data-placement="bottom"title="Hide Column"><iclass="fa fa-eye-slash"></i></button>DC</th><thclass="lightgray"colspan="4"><buttonclass="pull-right btn btn-default hide-column"data-toggle="tooltip"data-placement="bottom"title="Hide Column"><iclass="fa fa-eye-slash"></i></button>COUNT</th><thclass="lightgray"colspan="3">AREA</th><thclass="lightgray"colspan="15"><buttonclass="pull-right btn btn-default hide-column"data-toggle="tooltip"data-placement="bottom"title="Hide Column"><iclass="fa fa-eye-slash"></i></button>STP (ns)</th><thclass="lightgray"colspan="3"><buttonclass="pull-right btn btn-default hide-column"data-toggle="tooltip"data-placement="bottom"title="Hide Column"><iclass="fa fa-eye-slash"></i></button>HLD </th><thclass="lightgray"colspan="1"><buttonclass="pull-right btn btn-default hide-column"data-toggle="tooltip"data-placement="bottom"title="Hide Column"><iclass="fa fa-eye-slash"></i></button>GATE</th><thclass="lightgray"colspan="2"><buttonclass="pull-right btn btn-default hide-column"data-toggle="tooltip"data-placement="bottom"title="Hide Column"><iclass="fa fa-eye-slash"></i></button>CONG</th><thclass="lightgray"colspan="1"><buttonclass="pull-right btn btn-default hide-column"data-toggle="tooltip"data-placement="bottom"title="Hide Column"><iclass="fa fa-eye-slash"></i></button>DFT</th><thclass="lightgray"colspan="4"><buttonclass="pull-right btn btn-default hide-column"data-toggle="tooltip"data-placement="bottom"title="Hide Column"><iclass="fa fa-eye-slash"></i></button>POWER (mW) </th><thclass="lightgray"colspan="2"><buttonclass="pull-right btn btn-default hide-column"data-toggle="tooltip"data-placement="bottom"title="Hide Column"><iclass="fa fa-eye-slash"></i></button>DDD</th><thclass="lightgray"colspan="3"><buttonclass="pull-right btn btn-default hide-column"data-toggle="tooltip"data-placement="bottom"title="Hide Column"><iclass="fa fa-eye-slash"></i></button>THRESHOLD</th><thclass="lightgray"colspan="1"><buttonclass="pull-right btn btn-default hide-column"data-toggle="tooltip"data-placement="bottom"title="Hide Column"><iclass="fa fa-eye-slash"></i></button>RUNTIME</th></tr><tr><thclass="NO">BLOCK</th><th>DATE</th><th>DIR</th><th>FLV</th><th>ERR</th><th>WARN</th><th>UNCLK</th><th>TOTAL</th><th>BUF</th><th>INV</th><th>SEQ</th><th> AREA</th><th> AREA</th><th> AREA</th><th> WNS</th><th> NVEP</th><th> TNS</th><th> WNS</th><th> NVEP</th><th> TNS</th><th> WNS</th><th> NVEP</th><th> TNS</th><th> WNS</th><th> NVEP</th><th> TNS</th><th>OTHERS WNS</th><th>OTHERS NVEP</th><th>OTHERS TNS</th><th>WHS</th><th>NVEP</th><th>THS</th><th>%GTR</th><th>%OVRF</th><th>CRU</th><th>%SCND</th><th> POWER</th><th> POWER</th><th> POWER</th><th> POWER</th><th>TRNS</th><th>CAP</th><th>C1</th><th>C2</th><th>C3</th><th>TIME</th></tr></thead><tr><td>SRL</td><td>Nov/9/2020</td><td>----</td><td>NULL</td><td><ahref=""><pdatasdc-color="0">0</p></a></td><td><ahref=""><psdcwarn-color="1619">1619</p></a></td><td><ahref=""><pdatasdc-color="0">0</p></a></td><td>814764</td><td>50858</td><td>94615</td><td>174834</td><td>2351399</td><td><ahref="">2873882</a></td><td><ahref="">8900320</a></td><td><ahref=""><pdataswns-color="-1.26">-1.26</p></a></td><td><ahref=""><pdatafenep-color="277">277</p></a></td><td><ahref="">-22.62</a></td><td><ahref=""><pdataswns-color="-0.46">-0.46</p></a></td><td><ahref=""><pdatafenep-color="42">42</p></a></td><td><ahref="">-5.77</a></td><td><ahref=""><pdataswns-color="-0.09">-0.09</p></a></td><td><ahref=""><pdatafenep-color="56">56</p></a></td><td><ahref="">-0.30</a></td><td><ahref=""><pdataswns-color="0.00">0.00</p></a></td><td><ahref=""><pdatafenep-color="0">0</p></a></td><td><ahref="">0.00</a></td><td><ahref=""><pdataswns-color="-3.24">-3.24</p></a></td><td><ahref=""><pdatafenep-color="41">41</p></a></td><td><ahref="">-35.94</a></td><td><ahref=""><pdatahwns-color="-11.57">-11.57</p></a></td><td><ahref=""><pdatafenep-color="2426">2426</p></a></td><td><ahref="">-1341.85</a></td><td><ahref="">91.17%</a></td><td><ahref="">">Map</a></td><td><ahref="">0.16</a>/<ahref="">Map</a></td><td>NULL</td><td>28.20</td><td>17.79</td><td>52.60</td><td><pdatap-color="98.59">98.59</p></td><td><ahref=""><pdatadrv-color="877">877</p></a></td><td><ahref="">34</a></td><td><ahref=""><pdataulvt-color="0.19">0.19</p></a></td><td><ahref="">3.52</a></td><td><ahref="">96.29</a></td><td>12h:04m:03s</td></tr><tfootclass="footer-restore-columns"><tr><thclass="bigcolspan"colspan="50"><aclass="restore-columns"href="#">Some columns hidden - click to show all</a></th></tr></tfoot></table></body></html>

Post a Comment for "Hide And Show Html Table Columns"