1. 技术文章
  2. Hide and show html table columns

Hide and show html table columns

由 [亡魂溺海] 提交于 2021-02-11 13:21:40

问题


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 the columns from the right it works fine, but when i start from the left, i can see the issue; some cells get hidden even if not needed to be, this is my code thatnks:

$(function() {
 
  // on init
  $('.hide-column').eq(0).trigger( "click" );
  
   // on click
  $('.hide-column').click(HideColumns)
  
  function HideColumns() {
    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);
        return false;
      } else {
        colIndex += parseInt($(this).attr("colspan") || 1);
      };
    });

    // find and hide col index
    for (var i = colIndex; i < (colIndex + colSpan); i++) {
      $table.find("tbody tr, thead :nth-child(4)")
        .children(":nth-child(" + (i + 1) + ")")
        .addClass('hide-col');
    };
    
    //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');

  })

  $('[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;
     
}

#myTable th, #myTable td {
  text-align: left;
  padding: 12px;
}


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

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

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

.table-fixed {
  width: 100%;
}

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

thead tr:nth-child(1) th  {
    position: sticky;
    position: -webkit-sticky;   
    top: 0px;
    z-index: 999;
    background-color: white;
    color: black;
}
thead tr:nth-child(2) th  {
    position: sticky;
    position: -webkit-sticky;   
    top: 30px;
    z-index: 999;
    background-color: teal;
    color: black;
}
thead tr:nth-child(3) th  {
    position: sticky;
    position: -webkit-sticky;   
    top: 66px;
    z-index: 999;
    background-color: white;
    color: black;
}
thead tr: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;
  
}

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

.tscroll td, .tscroll th {
  //border-bottom: dashed #888 1px;
}



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;

}

li a {
 // 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;
}



.tscroll  th: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: block !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}
<!DOCTYPE html>
<html>
<head>

<script src="https://code.jquery.com/jquery-1.7.2.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" charset="ISO-8859-1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


<title>QoR_results_summary</title>

<style type="text/css">

</style>
</head>
<body>
<br>
<br>

<img align="left" src="logo.jpg" height="8%" width="auto" hspace="50"> 
</br>    
</br>
</br>
</br>

 
<div class="tscroll">
<table id="myTable" class="table-fixed">
<thead>
<tr>
<th class="NO" >&nbsp;</th>
<th class="NO" >&nbsp;</th>
<th class="NO" >&nbsp;</th>
<th class="NO" >&nbsp;</th>


<th colspan="44">IMP</th>
</tr>
<tr>
<th class="NO" >&nbsp;</th>
<th class="NO" >&nbsp;</th>
<th class="NO" >&nbsp;</th>
<th class="NO" >&nbsp;</th>
<th class="darkcyan" colspan="43">SYN</th>

</tr>
<tr>
<th class="NO" >&nbsp;</th>
<th class="NO" >&nbsp;</th>
<th class="NO" >&nbsp;</th>
<th class="NO" >&nbsp;</th>
<th class="lightgray" colspan="3"><button class="pull-right btn btn-default hide-column" 
            data-toggle="tooltip" data-placement="bottom" title="Hide Column">
    <i class="fa fa-eye-slash"></i>  
</button>DC</th>
<th class="lightgray" colspan="4"><button class="pull-right btn btn-default hide-column" 
            data-toggle="tooltip" data-placement="bottom" title="Hide Column">
    <i class="fa fa-eye-slash"></i>  
</button>COUNT</th>
<th class="lightgray" colspan="3">AREA  </th>
<th class="lightgray" colspan="15"><button class="pull-right btn btn-default hide-column" 
            data-toggle="tooltip" data-placement="bottom" title="Hide Column">
    <i class="fa fa-eye-slash"></i>  
</button>STP (ns)</th>
<th class="lightgray" colspan="3"><button class="pull-right btn btn-default hide-column" 
            data-toggle="tooltip" data-placement="bottom" title="Hide Column">
    <i class="fa fa-eye-slash"></i>  
</button>HLD </th>
<th class="lightgray" colspan="1"><button class="pull-right btn btn-default hide-column" 
            data-toggle="tooltip" data-placement="bottom" title="Hide Column">
    <i class="fa fa-eye-slash"></i>  
</button>GATE</th>
<th class="lightgray" colspan="2"><button class="pull-right btn btn-default hide-column" 
            data-toggle="tooltip" data-placement="bottom" title="Hide Column">
    <i class="fa fa-eye-slash"></i>  
</button>CONG</th>
<th class="lightgray" colspan="1"><button class="pull-right btn btn-default hide-column" 
            data-toggle="tooltip" data-placement="bottom" title="Hide Column">
    <i class="fa fa-eye-slash"></i>  
</button>DFT</th>
<th class="lightgray" colspan="4"><button class="pull-right btn btn-default hide-column" 
            data-toggle="tooltip" data-placement="bottom" title="Hide Column">
    <i class="fa fa-eye-slash"></i>  
</button>POWER (mW) </th>
<th class="lightgray" colspan="2"><button class="pull-right btn btn-default hide-column" 
            data-toggle="tooltip" data-placement="bottom" title="Hide Column">
    <i class="fa fa-eye-slash"></i>  
</button>DDD</th>
<th class="lightgray" colspan="3"><button class="pull-right btn btn-default hide-column" 
            data-toggle="tooltip" data-placement="bottom" title="Hide Column">
    <i class="fa fa-eye-slash"></i>  
</button>THRESHOLD</th>
<th class="lightgray" colspan="1"><button class="pull-right btn btn-default hide-column" 
            data-toggle="tooltip" data-placement="bottom" title="Hide Column">
    <i class="fa fa-eye-slash"></i>  
</button>RUNTIME</th>

</tr>
<tr>
<th class="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><a href=""><p datasdc-color="0">0</p></a></td>
<td><a href=""><p sdcwarn-color="1619">1619</p></a></td>
<td><a href=""><p datasdc-color="0">0</p></a></td>
<td>814764</td>
<td>50858</td>
<td>94615</td>
<td>174834</td>
<td>2351399</td>
<td><a href="">2873882</a></td>
<td><a href="">8900320</a></td>
<td><a href=""><p dataswns-color="-1.26">-1.26</p></a></td>
<td><a href=""><p datafenep-color="277">277</p></a></td>
<td><a href="">-22.62</a></td>
<td><a href=""><p dataswns-color="-0.46">-0.46</p></a></td>
<td><a href=""><p datafenep-color="42">42</p></a></td>
<td><a href="">-5.77</a></td>
<td><a href=""><p dataswns-color="-0.09">-0.09</p></a></td>
<td><a href=""><p datafenep-color="56">56</p></a></td>
<td><a href="">-0.30</a></td>
<td><a href=""><p dataswns-color="0.00">0.00</p></a></td>
<td><a href=""><p datafenep-color="0">0</p></a></td>
<td><a href="">0.00</a></td>
<td><a href=""><p dataswns-color="-3.24">-3.24</p></a></td>
<td><a href=""><p datafenep-color="41">41</p></a></td>
<td><a href="">-35.94</a></td>
<td><a href=""><p datahwns-color="-11.57">-11.57</p></a></td>
<td><a href=""><p datafenep-color="2426">2426</p></a></td>
<td><a href="">-1341.85</a></td>
<td><a href="">91.17%</a></td>
<td><a href="">">Map</a></td>
<td><a href="">0.16</a>/<a href="">Map</a></td>
<td>NULL</td>
<td>28.20</td>
<td>17.79</td>
<td>52.60</td>
<td><p datap-color="98.59">98.59</p></td>
<td><a href=""><p datadrv-color="877">877</p></a></td>
<td><a href="">34</a></td>
<td><a href=""><p dataulvt-color="0.19">0.19</p></a></td>
<td><a href="">3.52</a></td>
<td><a href="">96.29</a></td>
<td>12h:04m:03s</td>
</tr>

    <tfoot class="footer-restore-columns">
 <tr>
    <th colspan="50"><a class="restore-columns" href="#">Some columns hidden - click to show all</a></th>
  </tr>
</tfoot>
    
    </table>    

</body>

</html>

回答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'));
  });
  
  function HideColumns() {
    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);
        return false;
      } else {
        colIndex += parseInt($(this).attr("colspan") || 1);
      };
    });

    // find and hide col index
    for (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;
     
}

#myTable th, #myTable td {
  text-align: left;
  padding: 12px;
}


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

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

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

.table-fixed {
  width: 100%;
}

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

thead tr:nth-child(1) th  {
    position: sticky;
    position: -webkit-sticky;   
    top: 0px;
    z-index: 999;
    background-color: white;
    color: black;
}
thead tr:nth-child(2) th  {
    position: sticky;
    position: -webkit-sticky;   
    top: 30px;
    z-index: 999;
    background-color: teal;
    color: black;
}
thead tr:nth-child(3) th  {
    position: sticky;
    position: -webkit-sticky;   
    top: 66px;
    z-index: 999;
    background-color: white;
    color: black;
}
thead tr: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;
  
}

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

.tscroll td, .tscroll th {
  //border-bottom: dashed #888 1px;
}



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;

}

li a {
 // 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;
}



.tscroll  th: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>

    <script src="https://code.jquery.com/jquery-1.7.2.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

    <meta name="viewport" content="width=device-width, initial-scale=1" charset="ISO-8859-1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


    <title>QoR_results_summary</title>

    <style type="text/css">

    </style>
  </head>

  <body>
    <br>
    <br>

    <img align="left" src="logo.jpg" height="8%" width="auto" hspace="50">
    </br>
    </br>
    </br>
    </br>


    <div class="tscroll">
      <table id="myTable" class="table-fixed">
        <thead>
          <tr>
            <th class="NO">&nbsp;</th>
            <th class="NO">&nbsp;</th>
            <th class="NO">&nbsp;</th>
            <th class="NO">&nbsp;</th>


            <th class="bigcolspan" colspan="43">IMP</th>
          </tr>
          <tr>
            <th class="NO">&nbsp;</th>
            <th class="NO">&nbsp;</th>
            <th class="NO">&nbsp;</th>
            <th class="NO">&nbsp;</th>
            <th class="bigcolspan darkcyan" colspan="43">SYN</th>

          </tr>
          <tr>
            <th class="NO">&nbsp;</th>
            <th class="NO">&nbsp;</th>
            <th class="NO">&nbsp;</th>
            <th class="NO">&nbsp;</th>
            <th class="lightgray" colspan="3"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
                <i class="fa fa-eye-slash"></i>
              </button>DC</th>
            <th class="lightgray" colspan="4"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
                <i class="fa fa-eye-slash"></i>
              </button>COUNT</th>
            <th class="lightgray" colspan="3">AREA</th>
            <th class="lightgray" colspan="15"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
                <i class="fa fa-eye-slash"></i>
              </button>STP (ns)</th>
            <th class="lightgray" colspan="3"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
                <i class="fa fa-eye-slash"></i>
              </button>HLD </th>
            <th class="lightgray" colspan="1"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
                <i class="fa fa-eye-slash"></i>
              </button>GATE</th>
            <th class="lightgray" colspan="2"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
                <i class="fa fa-eye-slash"></i>
              </button>CONG</th>
            <th class="lightgray" colspan="1"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
                <i class="fa fa-eye-slash"></i>
              </button>DFT</th>
            <th class="lightgray" colspan="4"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
                <i class="fa fa-eye-slash"></i>
              </button>POWER (mW) </th>
            <th class="lightgray" colspan="2"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
                <i class="fa fa-eye-slash"></i>
              </button>DDD</th>
            <th class="lightgray" colspan="3"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
                <i class="fa fa-eye-slash"></i>
              </button>THRESHOLD</th>
            <th class="lightgray" colspan="1"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
                <i class="fa fa-eye-slash"></i>
              </button>RUNTIME</th>

          </tr>
          <tr>
            <th class="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><a href="">
              <p datasdc-color="0">0</p>
            </a></td>
          <td><a href="">
              <p sdcwarn-color="1619">1619</p>
            </a></td>
          <td><a href="">
              <p datasdc-color="0">0</p>
            </a></td>
          <td>814764</td>
          <td>50858</td>
          <td>94615</td>
          <td>174834</td>
          <td>2351399</td>
          <td><a href="">2873882</a></td>
          <td><a href="">8900320</a></td>
          <td><a href="">
              <p dataswns-color="-1.26">-1.26</p>
            </a></td>
          <td><a href="">
              <p datafenep-color="277">277</p>
            </a></td>
          <td><a href="">-22.62</a></td>
          <td><a href="">
              <p dataswns-color="-0.46">-0.46</p>
            </a></td>
          <td><a href="">
              <p datafenep-color="42">42</p>
            </a></td>
          <td><a href="">-5.77</a></td>
          <td><a href="">
              <p dataswns-color="-0.09">-0.09</p>
            </a></td>
          <td><a href="">
              <p datafenep-color="56">56</p>
            </a></td>
          <td><a href="">-0.30</a></td>
          <td><a href="">
              <p dataswns-color="0.00">0.00</p>
            </a></td>
          <td><a href="">
              <p datafenep-color="0">0</p>
            </a></td>
          <td><a href="">0.00</a></td>
          <td><a href="">
              <p dataswns-color="-3.24">-3.24</p>
            </a></td>
          <td><a href="">
              <p datafenep-color="41">41</p>
            </a></td>
          <td><a href="">-35.94</a></td>
          <td><a href="">
              <p datahwns-color="-11.57">-11.57</p>
            </a></td>
          <td><a href="">
              <p datafenep-color="2426">2426</p>
            </a></td>
          <td><a href="">-1341.85</a></td>
          <td><a href="">91.17%</a></td>
          <td><a href="">">Map</a></td>
          <td><a href="">0.16</a>/<a href="">Map</a></td>
          <td>NULL</td>
          <td>28.20</td>
          <td>17.79</td>
          <td>52.60</td>
          <td>
            <p datap-color="98.59">98.59</p>
          </td>
          <td><a href="">
              <p datadrv-color="877">877</p>
            </a></td>
          <td><a href="">34</a></td>
          <td><a href="">
              <p dataulvt-color="0.19">0.19</p>
            </a></td>
          <td><a href="">3.52</a></td>
          <td><a href="">96.29</a></td>
          <td>12h:04m:03s</td>
        </tr>

        <tfoot class="footer-restore-columns">
          <tr>
            <th class="bigcolspan" colspan="50"><a class="restore-columns" href="#">Some columns hidden - click to show all</a></th>
          </tr>
        </tfoot>

      </table>

  </body>

</html>


来源：https://stackoverflow.com/questions/65288649/hide-and-show-html-table-columns

标签
javascript
html
web
scripting
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!