堆栈内存溢出
  繁体   English   中英

如何隐藏HTML表中的列

[英]How to hide column in HTML table

 原文  2019-04-11 06:33:52  9   3    javascript/ jquery/ html/ css

问题描述

我有一个要从JSON数据呈现的HTML表，我有三个headers行，第一个显示的是total而Outlets分别是jayanagar ， Malleshwaram和Kolar ，第二个显示的是金额类型，即Gross Amount ， Discount ， GST和Net Amount第三个是按列分别显示金额，然后是显示完整数据的表主体

我想做的是：

  • 我有一个带有下拉菜单的输入框，可以选择多个选项
  • 选择框的Amount Type像Gross Amount ， Discount ， GST和Net Amount并有一个键Go
  • 因此，当用户在选择选项后单击“ Go ，我要尝试执行的操作是仅显示该列用户已选择的内容

我的表格代码 

 $(".checkbox-menu").on("change", "input[type='checkbox']", function() { // this one to select multiple options as check box $(this).closest("li").toggleClass("active", this.checked); var sList = ""; $('input[type=checkbox]').each(function() { if (this.checked) { sList += $(this).val() + "," } }); $("#To").val(sList.slice(0, -1)); }); $(document).on('click', '.allow-focus', function(e) { e.stopPropagation(); }); var data = [{ "billdate": "2018-08-04", "outlet": "JAYANAGAR", "gross": 490465, "discount": 839, "GST": 28465, "amount": 518212 }, { "billdate": "2018-08-04", "outlet": "MALLESHWARAM", "gross": 99212, "discount": 0, "GST": 5567, "amount": 104801 }, { "billdate": "2018-08-04", "outlet": "KOLAR", "gross": 131349, "discount": 0, "GST": 6676, "amount": 138151 }, { "billdate": "2018-08-05", "outlet": "JAYANAGAR", "gross": 594466, "discount": 591, "GST": 34374, "amount": 628358 }, { "billdate": "2018-08-05", "outlet": "MALLESHWARAM", "gross": 109029, "discount": 0, "GST": 6062, "amount": 115113 }, { "billdate": "2018-08-05", "outlet": "KOLAR", "gross": 127449, "discount": 0, "GST": 6511, "amount": 134107 }, { "billdate": "2018-08-06", "outlet": "JAYANAGAR", "gross": 167811, "discount": 0, "GST": 9968, "amount": 177866 }, { "billdate": "2018-08-06", "outlet": "KOLAR", "gross": 62796, "discount": 0, "GST": 3257, "amount": 66095 }, { "billdate": "2018-08-07", "outlet": "JAYANAGAR", "gross": 267398, "discount": 268, "GST": 15898, "amount": 283124 }, { "billdate": "2018-08-07", "outlet": "MALLESHWARAM", "gross": 55381, "discount": 0, "GST": 3383, "amount": 58789 }, { "billdate": "2018-08-07", "outlet": "KOLAR", "gross": 64586, "discount": 6, "GST": 3285, "amount": 67886 } ] let formatData = function(data) { let billdates = []; let outlets = []; data.forEach(element => { if (billdates.indexOf(element.billdate) == -1) { billdates.push(element.billdate); } if (outlets.indexOf(element.outlet) == -1) { outlets.push(element.outlet); } }); return { data: data, billdates: billdates, outlets: outlets, }; }; let renderTable = function(data) { billdates = data.billdates; outlets = data.outlets; data = data.data; let tbl = document.getElementById("dailySales"); let table = document.createElement("table"); let thead = document.createElement("thead"); let headerRow = document.createElement("tr"); let th = document.createElement("th"); th.innerHTML = "BillDate"; th.classList.add("text-center"); headerRow.appendChild(th); let grandTotal = 0; let grandGross = 0; let grandDiscount = 0; let grandGst = 0; let outletWiseTotal = {}; let outletWiseGross = {}; let outletWiseDiscount = {}; let outletWiseGst = {}; th = document.createElement("th"); th.colSpan = 4; th.innerHTML = "Total"; th.classList.add("text-center"); headerRow.appendChild(th); outlets.forEach(element => { th = document.createElement("th"); th.colSpan = 4; th.innerHTML = element; th.classList.add("text-center"); headerRow.appendChild(th); outletWiseTotal[element] = 0; outletWiseGross[element] = 0; outletWiseDiscount[element] = 0; outletWiseGst[element] = 0; data.forEach(el => { if (el.outlet == element) { outletWiseTotal[element] += parseInt(el.amount); outletWiseGross[element] += parseInt(el.gross); outletWiseDiscount[element] += parseInt(el.discount); outletWiseGst[element] += parseInt(el.GST); } }); grandTotal += outletWiseTotal[element]; //calculating totals for Total column grandGross += outletWiseGross[element]; grandDiscount += outletWiseDiscount[element]; grandGst += outletWiseGst[element]; }); thead.appendChild(headerRow); headerRow = document.createElement("tr"); th = document.createElement("th"); th.innerHTML = ""; headerRow.appendChild(th); for (i = 0; i < outlets.length + 1; i++) { //here i am making the header as col-span th = document.createElement("th"); th.innerHTML = "Discount"; th.classList.add("text-center"); th.classList.add("discount"); //adding class to column discount headerRow.appendChild(th); th = document.createElement("th"); th.innerHTML = "GST"; th.classList.add("text-center"); th.classList.add("gst"); //adding class to column gst headerRow.appendChild(th); th = document.createElement("th"); th.innerHTML = "Net Amount"; th.classList.add("text-center"); th.classList.add("netAmount"); //adding class to column Net Amount headerRow.appendChild(th); th = document.createElement("th"); th.innerHTML = "Gross Amount"; th.classList.add("text-center"); th.classList.add("grossAmount"); //adding class to column Gross Amount headerRow.appendChild(th); } headerRow.insertBefore(th, headerRow.children[1]); thead.appendChild(headerRow); table.appendChild(thead); headerRow = document.createElement("tr"); td = document.createElement("th"); td.innerHTML = "Total"; td.classList.add("text-center"); headerRow.appendChild(td); outlets.forEach(element => { // these are the table rows for each column td = document.createElement("th"); td.innerHTML = outletWiseGross[element].toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.appendChild(td); td = document.createElement("th"); td.innerHTML = outletWiseDiscount[element].toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.appendChild(td); td = document.createElement("th"); td.innerHTML = outletWiseGst[element].toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.appendChild(td); td = document.createElement("th"); td.innerHTML = outletWiseTotal[element].toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.appendChild(td); }); td = document.createElement("th"); td.innerHTML = grandTotal.toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.insertBefore(td, headerRow.children[1]); td = document.createElement("th"); td.innerHTML = grandGst.toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.insertBefore(td, headerRow.children[1]); td = document.createElement("th"); td.innerHTML = grandDiscount.toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.insertBefore(td, headerRow.children[1]); td = document.createElement("th"); td.innerHTML = grandGross.toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.insertBefore(td, headerRow.children[1]); thead.appendChild(headerRow); table.appendChild(thead); let tbody = document.createElement("tbody"); billdates.forEach(element => { let row = document.createElement("tr"); td = document.createElement("td"); td.innerHTML = element; row.appendChild(td); let total = 0; let totalGross = 0; let totalDiscount = 0; let totalGST = 0; outlets.forEach(outlet => { let ta = 0; let tg = 0; let tdi = 0; let tgst = 0; data.forEach(d => { if (d.billdate == element && d.outlet == outlet) { total += parseInt(d.amount); totalGross += parseInt(d.gross); totalDiscount += parseInt(d.discount); totalGST += parseInt(d.GST); ta = d.amount; tg = d.gross; tdi = d.discount; tgst = d.GST; } }); td = document.createElement("td"); td.innerHTML = tg.toLocaleString('en-IN'); td.classList.add("text-right"); row.appendChild(td); td = document.createElement("td"); td.innerHTML = tdi.toLocaleString('en-IN'); td.classList.add("text-right"); row.appendChild(td); td = document.createElement("td"); td.innerHTML = tgst.toLocaleString('en-IN'); td.classList.add("text-right"); row.appendChild(td); td = document.createElement("td"); td.innerHTML = ta.toLocaleString('en-IN'); td.classList.add("text-right"); row.appendChild(td); }); td = document.createElement("td"); td.innerHTML = total.toLocaleString('en-IN'); td.classList.add("text-right"); row.insertBefore(td, row.children[1]); td = document.createElement("td"); td.innerHTML = totalGST.toLocaleString('en-IN'); td.classList.add("text-right"); row.insertBefore(td, row.children[1]); td = document.createElement("td"); td.innerHTML = totalDiscount.toLocaleString('en-IN'); td.classList.add("text-right"); row.insertBefore(td, row.children[1]); td = document.createElement("td"); td.innerHTML = totalGross.toLocaleString('en-IN'); td.classList.add("text-right"); row.insertBefore(td, row.children[1]); tbody.appendChild(row); }); table.appendChild(tbody); tbl.innerHTML = ""; tbl.appendChild(table); table.classList.add("table"); table.classList.add("table-striped"); table.classList.add("table-bordered"); table.classList.add("table-hover"); } let formatedData = formatData(data); renderTable(formatedData); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"> <div class="form-group col-xs-12 col-sm-12 col-md-4 col-lg-4"> <label for="subCategoryCode">Filter Data :</label> <div class="input-group"> <input type="text" class="form-control" aria-label="Text input with dropdown button" name="To" id="To" readonly> <div class="input-group-append"> <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button> <ul class="dropdown-menu checkbox-menu allow-focus" aria-labelledby="dropdownMenu1"> <li><label> <input type="checkbox" value="Gross Amount"> Gross Amount </label></li> <li><label> <input type="checkbox" value="Discount"> Discount </label></li> <li><label> <input type="checkbox" value="GST"> GST </label></li> <li><label> <input type="checkbox" value="Net Amount"> Net Amount </label></li> </ul> </div> <button type="button" class="commonButton" id="save"> <i class="fa fa-search"></i>&nbsp;Go </button> </div> </div> <div align="left" class="table table-responsive" id="commonDvScroll"> <table id="dailySales" class="maxWidthCommonTable"></table> </div>

由于我的代码有点长，所以我在JavaScript代码中注释了我正在做什么的行，以使其更容易

我想根据用户选择隐藏列。这里的任何人都可以通过某种方法帮助我

3 个解决方案

解决方案1
 0  2019-04-11 07:29:40

适当的方法是将列数据添加到表中，如下所示： 

<table class="table table-striped table-bordered table-hover">
  <thead></thead>
  <colgroup>
    <col style="background-color:yellow; visibility: collapse;">
    <col id="total" span="4" style="background-color:red">
  </colgroup>
  <tbody>
    <tr>
      <th class="text-center">BillDate</th>
      <th colspan="4" class="text-center">Total</th>
      <th colspan="4" class="text-center">JAYANAGAR</th>
      <th colspan="4" class="text-center">MALLESHWARAM</th>
      <th colspan="4" class="text-center">KOLAR</th>
    </tr>
    ...
  </tbody>
</table>

但是有一个chrome bug ，它阻止了可见性属性对cols或colgroups产生任何影响。

然后，我将避免使用表，而是使用常规div手动构建表，并将列分组在一起。

解决方案2
 0  2019-04-11 07:30:28

请通过这些链接。 根据我的观点，您可以避免选择框（如果您仅将选择框值用于隐藏列）。 您可以使用以下链接中提到的方法。 

`https://codepen.io/feger/pen/eDybC`

使用jQuery显示/隐藏表列

https://api.jquery.com/hide/#hide-options

您可以使用.hide（）隐藏匹配的元素。

解决方案3
 0 已采纳  2019-04-11 08:37:02

我看到您在表头中使用了诸如grossAmount ， discount ， gst和netAmount类的类……这是一件好事。

如果将这些类添加到每一行中的相应单元格，甚至会更好。 您可以使用真正简单的方法来显示/隐藏单元格。

我使用了3个嵌套循环来根据具有选定类的标头的index显示单元格，从而实现了一些更为复杂的方法。

我从#To输入中选取了选定的类，这是一个逗号分隔的单词列表，与查找列索引所需的类接近 。

请注意，它远非最佳和有效的编码方式，但是它可以工作……并且可能对您有启发性。 ;） 

$("#save").on("click",function(){

  // Get the selected classes
  var classes = $("#To").val().replace(/\s+/g,"").split(",");

  // Hide cells
  $(".table thead tr:not(:first) th:not(:first-child)").hide();
  $(".table tbody tr td:not(:first-child)").hide();

  // Adjust thead first row colspans
  $(".table thead tr:first th:not(:first)").attr("colspan",classes.length);

  // For each classes selected
  for(i=0;i<classes.length;i++){
    //force 3 first letters to lowercase
    var classToShow = classes[i].substr(0,3).toLowerCase() + classes[i].substr(3);

    // For each element having the class
    $("."+classToShow).each(function(){
      var index = $(this).index();

      // Show selected cells in the thead
      $(".table thead tr:not(:first)").each(function(){
        $(this).find("th").eq(index).show();
      });

      // Show selected cells in the tbody
      $(".table tbody tr").each(function(){
        $(this).find("td").eq(index).show();
      });
    });
  }
});


 $("#save").on("click",function(){ // Get the selected classes var classes = $("#To").val().replace(/\\s+/g,"").split(","); // Hide cells $(".table thead tr:not(:first) th:not(:first-child)").hide(); $(".table tbody tr td:not(:first-child)").hide(); // Adjust thead first row colspans $(".table thead tr:first th:not(:first)").attr("colspan",classes.length); // For each classes selected for(i=0;i<classes.length;i++){ //force 3 first letters to lowercase var classToShow = classes[i].substr(0,3).toLowerCase() + classes[i].substr(3); // For each element having the class $("."+classToShow).each(function(){ var index = $(this).index(); // Show selected cells in the thead $(".table thead tr:not(:first)").each(function(){ $(this).find("th").eq(index).show(); }); // Show selected cells in the tbody $(".table tbody tr").each(function(){ $(this).find("td").eq(index).show(); }); }); } }); // ======================= NOTHING CHANGED BELOW $(".checkbox-menu").on("change", "input[type='checkbox']", function() { // this one to select multiple options as check box $(this).closest("li").toggleClass("active", this.checked); var sList = ""; $('input[type=checkbox]').each(function() { if (this.checked) { sList += $(this).val() + "," } }); $("#To").val(sList.slice(0, -1)); }); $(document).on('click', '.allow-focus', function(e) { e.stopPropagation(); }); var data = [{ "billdate": "2018-08-04", "outlet": "JAYANAGAR", "gross": 490465, "discount": 839, "GST": 28465, "amount": 518212 }, { "billdate": "2018-08-04", "outlet": "MALLESHWARAM", "gross": 99212, "discount": 0, "GST": 5567, "amount": 104801 }, { "billdate": "2018-08-04", "outlet": "KOLAR", "gross": 131349, "discount": 0, "GST": 6676, "amount": 138151 }, { "billdate": "2018-08-05", "outlet": "JAYANAGAR", "gross": 594466, "discount": 591, "GST": 34374, "amount": 628358 }, { "billdate": "2018-08-05", "outlet": "MALLESHWARAM", "gross": 109029, "discount": 0, "GST": 6062, "amount": 115113 }, { "billdate": "2018-08-05", "outlet": "KOLAR", "gross": 127449, "discount": 0, "GST": 6511, "amount": 134107 }, { "billdate": "2018-08-06", "outlet": "JAYANAGAR", "gross": 167811, "discount": 0, "GST": 9968, "amount": 177866 }, { "billdate": "2018-08-06", "outlet": "KOLAR", "gross": 62796, "discount": 0, "GST": 3257, "amount": 66095 }, { "billdate": "2018-08-07", "outlet": "JAYANAGAR", "gross": 267398, "discount": 268, "GST": 15898, "amount": 283124 }, { "billdate": "2018-08-07", "outlet": "MALLESHWARAM", "gross": 55381, "discount": 0, "GST": 3383, "amount": 58789 }, { "billdate": "2018-08-07", "outlet": "KOLAR", "gross": 64586, "discount": 6, "GST": 3285, "amount": 67886 } ] let formatData = function(data) { let billdates = []; let outlets = []; data.forEach(element => { if (billdates.indexOf(element.billdate) == -1) { billdates.push(element.billdate); } if (outlets.indexOf(element.outlet) == -1) { outlets.push(element.outlet); } }); return { data: data, billdates: billdates, outlets: outlets, }; }; let renderTable = function(data) { billdates = data.billdates; outlets = data.outlets; data = data.data; let tbl = document.getElementById("dailySales"); let table = document.createElement("table"); let thead = document.createElement("thead"); let headerRow = document.createElement("tr"); let th = document.createElement("th"); th.innerHTML = "BillDate"; th.classList.add("text-center"); headerRow.appendChild(th); let grandTotal = 0; let grandGross = 0; let grandDiscount = 0; let grandGst = 0; let outletWiseTotal = {}; let outletWiseGross = {}; let outletWiseDiscount = {}; let outletWiseGst = {}; th = document.createElement("th"); th.colSpan = 4; th.innerHTML = "Total"; th.classList.add("text-center"); headerRow.appendChild(th); outlets.forEach(element => { th = document.createElement("th"); th.colSpan = 4; th.innerHTML = element; th.classList.add("text-center"); headerRow.appendChild(th); outletWiseTotal[element] = 0; outletWiseGross[element] = 0; outletWiseDiscount[element] = 0; outletWiseGst[element] = 0; data.forEach(el => { if (el.outlet == element) { outletWiseTotal[element] += parseInt(el.amount); outletWiseGross[element] += parseInt(el.gross); outletWiseDiscount[element] += parseInt(el.discount); outletWiseGst[element] += parseInt(el.GST); } }); grandTotal += outletWiseTotal[element]; //calculating totals for Total column grandGross += outletWiseGross[element]; grandDiscount += outletWiseDiscount[element]; grandGst += outletWiseGst[element]; }); thead.appendChild(headerRow); headerRow = document.createElement("tr"); th = document.createElement("th"); th.innerHTML = ""; headerRow.appendChild(th); for (i = 0; i < outlets.length + 1; i++) { //here i am making the header as col-span th = document.createElement("th"); th.innerHTML = "Discount"; th.classList.add("text-center"); th.classList.add("discount"); //adding class to column discount headerRow.appendChild(th); th = document.createElement("th"); th.innerHTML = "GST"; th.classList.add("text-center"); th.classList.add("gst"); //adding class to column gst headerRow.appendChild(th); th = document.createElement("th"); th.innerHTML = "Net Amount"; th.classList.add("text-center"); th.classList.add("netAmount"); //adding class to column Net Amount headerRow.appendChild(th); th = document.createElement("th"); th.innerHTML = "Gross Amount"; th.classList.add("text-center"); th.classList.add("grossAmount"); //adding class to column Gross Amount headerRow.appendChild(th); } headerRow.insertBefore(th, headerRow.children[1]); thead.appendChild(headerRow); table.appendChild(thead); headerRow = document.createElement("tr"); td = document.createElement("th"); td.innerHTML = "Total"; td.classList.add("text-center"); headerRow.appendChild(td); outlets.forEach(element => { // these are the table rows for each column td = document.createElement("th"); td.innerHTML = outletWiseGross[element].toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.appendChild(td); td = document.createElement("th"); td.innerHTML = outletWiseDiscount[element].toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.appendChild(td); td = document.createElement("th"); td.innerHTML = outletWiseGst[element].toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.appendChild(td); td = document.createElement("th"); td.innerHTML = outletWiseTotal[element].toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.appendChild(td); }); td = document.createElement("th"); td.innerHTML = grandTotal.toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.insertBefore(td, headerRow.children[1]); td = document.createElement("th"); td.innerHTML = grandGst.toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.insertBefore(td, headerRow.children[1]); td = document.createElement("th"); td.innerHTML = grandDiscount.toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.insertBefore(td, headerRow.children[1]); td = document.createElement("th"); td.innerHTML = grandGross.toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.insertBefore(td, headerRow.children[1]); thead.appendChild(headerRow); table.appendChild(thead); let tbody = document.createElement("tbody"); billdates.forEach(element => { let row = document.createElement("tr"); td = document.createElement("td"); td.innerHTML = element; row.appendChild(td); let total = 0; let totalGross = 0; let totalDiscount = 0; let totalGST = 0; outlets.forEach(outlet => { let ta = 0; let tg = 0; let tdi = 0; let tgst = 0; data.forEach(d => { if (d.billdate == element && d.outlet == outlet) { total += parseInt(d.amount); totalGross += parseInt(d.gross); totalDiscount += parseInt(d.discount); totalGST += parseInt(d.GST); ta = d.amount; tg = d.gross; tdi = d.discount; tgst = d.GST; } }); td = document.createElement("td"); td.innerHTML = tg.toLocaleString('en-IN'); td.classList.add("text-right"); row.appendChild(td); td = document.createElement("td"); td.innerHTML = tdi.toLocaleString('en-IN'); td.classList.add("text-right"); row.appendChild(td); td = document.createElement("td"); td.innerHTML = tgst.toLocaleString('en-IN'); td.classList.add("text-right"); row.appendChild(td); td = document.createElement("td"); td.innerHTML = ta.toLocaleString('en-IN'); td.classList.add("text-right"); row.appendChild(td); }); td = document.createElement("td"); td.innerHTML = total.toLocaleString('en-IN'); td.classList.add("text-right"); row.insertBefore(td, row.children[1]); td = document.createElement("td"); td.innerHTML = totalGST.toLocaleString('en-IN'); td.classList.add("text-right"); row.insertBefore(td, row.children[1]); td = document.createElement("td"); td.innerHTML = totalDiscount.toLocaleString('en-IN'); td.classList.add("text-right"); row.insertBefore(td, row.children[1]); td = document.createElement("td"); td.innerHTML = totalGross.toLocaleString('en-IN'); td.classList.add("text-right"); row.insertBefore(td, row.children[1]); tbody.appendChild(row); }); table.appendChild(tbody); tbl.innerHTML = ""; tbl.appendChild(table); table.classList.add("table"); table.classList.add("table-striped"); table.classList.add("table-bordered"); table.classList.add("table-hover"); } let formatedData = formatData(data); renderTable(formatedData); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"> <div class="form-group col-xs-12 col-sm-12 col-md-4 col-lg-4"> <label for="subCategoryCode">Filter Data :</label> <div class="input-group"> <input type="text" class="form-control" aria-label="Text input with dropdown button" name="To" id="To" readonly> <div class="input-group-append"> <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button> <ul class="dropdown-menu checkbox-menu allow-focus" aria-labelledby="dropdownMenu1"> <li><label> <input type="checkbox" value="Gross Amount"> Gross Amount </label></li> <li><label> <input type="checkbox" value="Discount"> Discount </label></li> <li><label> <input type="checkbox" value="GST"> GST </label></li> <li><label> <input type="checkbox" value="Net Amount"> Net Amount </label></li> </ul> </div> <button type="button" class="commonButton" id="save"> <i class="fa fa-search"></i>&nbsp;Go </button> </div> </div> <div align="left" class="table table-responsive" id="commonDvScroll"> <table id="dailySales" class="maxWidthCommonTable"></table> </div>

编辑

这是一个有关如何使用单元格类显示/隐藏列的示例。 我是在您的桌子的简化版本上制作的...

顺便说一句，这里的表是否为“动态”的不是问题。因为显示/隐藏动作在表被渲染时运行。 因此，所有需要的元素都存在，并且可以针对用户触发的事件。

我使用了您拥有的4列类...还有2个类： selectable到所有可能被隐藏/显示和colspaned单元格，以定位需要进行colspan属性调整的标题。

因此，正如您在下面看到的那样，它效率更高，因为只有一个简单的循环来收集每个4个复选框的值和相应的类。 我已经将这些类放在了data属性中。 

 var selections = $(".checkbox-menu :checkbox"); var filterData = $("#To"); var originalColspan = $(".colspaned").attr("colspan"); selections.on("change",function(){ // Clear the "Filter Data" input filterData.val(""); // Get the selected classe var classes = []; var values = []; selections.each(function(){ if($(this).is(":checked")){ // Get the selected classe classes.push( "." + $(this).data("select") ); // Value in the "filter Data" input values.push( $(this).val() ); } }); // Value in the "filter Data" input... If still useful (!) filterData.val(values.join(",")); // Get how many selected var selectedAmount = classes.length; // If at least one selection if(selectedAmount>0){ // Adjust headers colspan attr $(".colspaned").attr("colspan",selectedAmount); // Hide all cells $(".selectable").hide(); // Show selected $(classes.join(",")).show(); } // If no selection, show all cells else{ $(".selectable").show(); // Adjust headers colspan attr $(".colspaned").attr("colspan",originalColspan); } }); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"> <div class="form-group col-xs-12 col-sm-12 col-md-4 col-lg-4"> <label for="subCategoryCode">Filter Data :</label> <div class="input-group"> <input type="text" class="form-control" aria-label="Text input with dropdown button" name="To" id="To" readonly> <div class="input-group-append"> <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button> <ul class="dropdown-menu checkbox-menu allow-focus" aria-labelledby="dropdownMenu1"> <li> <label> <input type="checkbox" value="Gross Amount" data-select="grossAmount"> Gross Amount </label> </li> <li> <label> <input type="checkbox" value="Discount" data-select="discount"> Discount </label> </li> <li> <label> <input type="checkbox" value="GST" data-select="gst"> GST </label> </li> <li> <label> <input type="checkbox" value="Net Amount" data-select="netAmount"> Net Amount </label> </li> </ul> </div> <button type="button" class="commonButton" id="save"> <i class="fa fa-search"></i>&nbsp;Go </button> </div> </div> <div align="left" class="table table-responsive" id="commonDvScroll"> <table id="dailySales" class="maxWidthCommonTable"> <table id="dailySales" class="maxWidthCommonTable"><table class="table table-striped table-bordered table-hover"> <thead> <tr> <th class="text-center">BillDate</th> <th colspan="4" class="text-center colspaned">Total</th> </tr> <tr> <th> </th> <th class="text-center grossAmount selectable">Gross Amount</th> <th class="text-center discount selectable">Discount</th> <th class="text-center gst selectable">GST</th> <th class="text-center netAmount selectable">Net Amount</th> </tr> <tr> <th class="text-center">Total</th> <th class="text-right grossAmount selectable">21,69,942</th> <th class="text-right discount selectable">1,704</th> <th class="text-right gst selectable">1,23,446</th> <th class="text-right netAmount selectable">22,92,502</th> </tr> </thead> <tbody> <tr> <td>2018-08-04</td> <td class="text-right grossAmount selectable">7,21,026</td> <td class="text-right discount selectable">839</td> <td class="text-right gst selectable">40,708</td> <td class="text-right netAmount selectable">7,61,164</td> </tr> <tr> <td>2018-08-05</td> <td class="text-right grossAmount selectable">8,30,944</td> <td class="text-right discount selectable">591</td> <td class="text-right gst selectable">46,947</td> <td class="text-right netAmount selectable">8,77,578</td> </tr> <tr> <td>2018-08-06</td> <td class="text-right grossAmount selectable">2,30,607</td> <td class="text-right discount selectable">0</td> <td class="text-right gst selectable">13,225</td> <td class="text-right netAmount selectable">2,43,961</td> </tr> <tr> <td>2018-08-07</td> <td class="text-right grossAmount selectable">3,87,365</td> <td class="text-right discount selectable">274</td> <td class="text-right gst selectable">22,566</td> <td class="text-right netAmount selectable">4,09,799</td> </tr> </tbody> </table> </table> </div>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 在嵌套的HTML表中隐藏列 隐藏嵌套的html表列 如果此列下的行为空，如何隐藏 HTML 表中的列？ 如何基于php条件隐藏和显示html表中的列 在html表的javascript导出中隐藏列 如何隐藏HTML表格行 如何在html表中隐藏具有合并标题的列 如何基于AA值角度隐藏表格列？ 如何在谷歌图表表中隐藏列 如何在ASP MVC中隐藏表格列
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM