javascript - 如何隐藏 HTML 表格中的列

标签 javascript jquery html css

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

我想做的是:-

  • 我有一个带有下拉框的输入字段，它是用于选择多个选项的复选框
  • 选择框是金额类型，例如总金额、折扣、GST 和净金额 并且只有一个按钮 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 代码中注释了我正在做的事情以使其更容易

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

最佳答案

我看到您在表头中使用了一些类，例如 grossAmount、discount、gst 和 netAmount ...这是一件好事。

如果将这些类添加到每一行的相应单元格中，甚至会更好。您可以非常轻松地使用它们来显示/隐藏单元格。

我实现了一些更复杂的东西，使用类似 3 个嵌套循环的东西来显示基于具有选定类的 header 的 index 的单元格。

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

请注意，它远非最佳和高效的编码，但它可以工作......并且可能对您有指导意义。 ;)

$("#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>

编辑

这是一个关于如何使用类来显示/隐藏使用单元格类的列的示例。我在你的 table 的缩短版上做了它...

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

我使用了您拥有的 4 列类...还有 2 个:selectable 用于定位所有可能隐藏/显示的单元格，colspaned 用于定位标题这将需要调整 colspan 属性。

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

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>

关于javascript - 如何隐藏 HTML 表格中的列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55626077/

上一篇：javascript - 当光标离开 div 区域时元素停止拖动

下一篇：html - 菜单切换垂直而不是水平导航栏切换

相关文章：

javascript - Jquery .append 和appendto() 悲伤

javascript - 如何从 Handlebars 模板中选择元素？

html - 为什么 Safari 会截掉这段文字的顶部？

javascript - axios get请求中如何添加参数

javascript - 当尝试从 JS 向 Slim PHP 调用 GET 请求时，net::ERR_CONNECTION_REFUSED

javascript - 是否可以在不使用 WebRTC 的情况下通过网络上的 websocket 进行视频通话？

javascript - AngularJS 创建下拉菜单

jquery - 如何在网页加载时从右向左滚动图像？

javascript - 填充窗口背景

javascript - 渲染没有返回任何内容；尝试重定向到主页

©2024 IT工具网  联系我们