javascript - 如何制作 HTML 表格第一列修复

标签 javascript jquery css html-table

我有一个 HTML 表格，我试图仅使用 CSS 或 JS 来修复它的第一列，我已经使用 JavaScript 修复了我的表格的标题，但是我在修复我的表格的第一列时遇到了问题

我用来修复我的 JS 代码

document.getElementById("commonDvScroll").addEventListener("scroll",function(){
       var translate = "translate(0,"+this.scrollTop+"px)";
       this.querySelector("thead").style.transform = translate;
    });

我在谷歌上搜索了很多这个问题，但没有找到任何答案，我使用了其中的一些，但它们造成了表格布局更改标题和列边框不匹配等问题。

我的代码

var data = [{
    "billdate": "2018-09-01",
    "outlet": "Site1",
    "gross": 451458,
    "discount": 513,
    "GST": 25357,
    "amount": 476426
  },
  {
    "billdate": "2018-09-01",
    "outlet": "Site3",
    "gross": 87190,
    "discount": 0,
    "GST": 4930,
    "amount": 92141
  },
  {
    "billdate": "2018-09-01",
    "outlet": "Site2",
    "gross": 109308,
    "discount": 0,
    "GST": 5966,
    "amount": 115313
  },
  {
    "billdate": "2018-09-02",
    "outlet": "Site1",
    "gross": 483194,
    "discount": 471,
    "GST": 28319,
    "amount": 511153
  },
  {
    "billdate": "2018-09-02",
    "outlet": "Site3",
    "gross": 109483,
    "discount": 0,
    "GST": 6198,
    "amount": 115704
  },
  {
    "billdate": "2018-09-02",
    "outlet": "Site2",
    "gross": 79305,
    "discount": 0,
    "GST": 4254,
    "amount": 83597
  },
  {
    "billdate": "2018-09-03",
    "outlet": "Site1",
    "gross": 157660,
    "discount": 263,
    "GST": 9944,
    "amount": 167421
  },
  {
    "billdate": "2018-09-03",
    "outlet": "Site2",
    "gross": 51059,
    "discount": 0,
    "GST": 2693,
    "amount": 53775
  }
]




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++) {
    th = document.createElement("th");
    th.innerHTML = "Discount";
    th.classList.add("text-center");
    th.classList.add("discount");
    headerRow.appendChild(th);

    th = document.createElement("th");
    th.innerHTML = "GST";
    th.classList.add("text-center");
    th.classList.add("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);


$(".checkbox-menu").on("change", "input[type='checkbox']", function() { // this one to select multiple options as check box

  $("#save").show();
  $(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();
});


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

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

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

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

  for (i = 0; i < classes.length; i++) {
    var classToShow = classes[i].substr(0, 3).toLowerCase() + classes[i].substr(3);

    $("." + classToShow).each(function() {
      var index = $(this).index();

      $(".table thead tr:not(:first)").each(function() {
        $(this).find("th").eq(index).show();
      });

      $(".table tbody tr").each(function() {
        $(this).find("td").eq(index).show();
      });
    });
  }
});
table.table-bordered>thead>tr>th {
  border: 1px solid white;
  white-space: nowrap;
  border-collapse: collapse;
  font-family: Verdana;
  font-size: 9pt;
  padding: 5px 5px 5px 5px;
  background-color: rgba(29, 150, 178, 1);
  font-weight: normal;
  text-align: center;
  color: white;
}

table.table-bordered>tbody>tr>td {
  border: 1px solid rgba(29, 150, 178, 1);
  white-space: nowrap;
  border-collapse: collapse;
  font-family: Verdana;
  font-size: 8pt;
  background-color: rgba(84, 83, 72, .1);
  padding: 5px 5px 5px 5px;
  color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<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>
<div class="form-group  col-xs-12 col-sm-12 col-md-8 col-lg-8">

  <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 id="dailySales" class="table table-responsive"></div>

注意-:由于某些原因我不能使用数据表，我只使用 JavaScript、jquery 和 css

我只是想用 css 做这个

最佳答案

假设第一列的宽度和高度是固定值，尝试下面更新的代码片段

var data = [{
    "billdate": "2018-09-01",
    "outlet": "Site1",
    "gross": 451458,
    "discount": 513,
    "GST": 25357,
    "amount": 476426
  },
  {
    "billdate": "2018-09-01",
    "outlet": "Site3",
    "gross": 87190,
    "discount": 0,
    "GST": 4930,
    "amount": 92141
  },
  {
    "billdate": "2018-09-01",
    "outlet": "Site2",
    "gross": 109308,
    "discount": 0,
    "GST": 5966,
    "amount": 115313
  },
  {
    "billdate": "2018-09-02",
    "outlet": "Site1",
    "gross": 483194,
    "discount": 471,
    "GST": 28319,
    "amount": 511153
  },
  {
    "billdate": "2018-09-02",
    "outlet": "Site3",
    "gross": 109483,
    "discount": 0,
    "GST": 6198,
    "amount": 115704
  },
  {
    "billdate": "2018-09-02",
    "outlet": "Site2",
    "gross": 79305,
    "discount": 0,
    "GST": 4254,
    "amount": 83597
  },
  {
    "billdate": "2018-09-03",
    "outlet": "Site1",
    "gross": 157660,
    "discount": 263,
    "GST": 9944,
    "amount": 167421
  },
  {
    "billdate": "2018-09-03",
    "outlet": "Site2",
    "gross": 51059,
    "discount": 0,
    "GST": 2693,
    "amount": 53775
  }
]




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++) {
    th = document.createElement("th");
    th.innerHTML = "Discount";
    th.classList.add("text-center");
    th.classList.add("discount");
    headerRow.appendChild(th);

    th = document.createElement("th");
    th.innerHTML = "GST";
    th.classList.add("text-center");
    th.classList.add("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);


$(".checkbox-menu").on("change", "input[type='checkbox']", function() { // this one to select multiple options as check box

  $("#save").show();
  $(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();
});


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

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

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

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

  for (i = 0; i < classes.length; i++) {
    var classToShow = classes[i].substr(0, 3).toLowerCase() + classes[i].substr(3);

    $("." + classToShow).each(function() {
      var index = $(this).index();

      $(".table thead tr:not(:first)").each(function() {
        $(this).find("th").eq(index).show();
      });

      $(".table tbody tr").each(function() {
        $(this).find("td").eq(index).show();
      });
    });
  }
});
table.table-bordered>thead>tr>th {
  border: 1px solid rgba(29, 150, 178, 1);
  white-space: nowrap;
  border-collapse: collapse;
  font-family: Verdana;
  font-size: 9pt;
  padding: 5px 5px 5px 5px;
  background-color: #E6BBE2;
  font-weight: normal;
  text-align: center;
  color: black;
}

table.table-bordered>tbody>tr>td {
  border: 1px solid rgba(29, 150, 178, 1);
  white-space: nowrap;
  border-collapse: collapse;
  font-family: Verdana;
  font-size: 8pt;
  background-color: #C39898;
  padding: 5px 5px 5px 5px;
  color: black;
}

table{
margin-left : 75px;
}

table tr>th:first-child{
position:absolute;
width:75px;
left:0;
height:30px;
}

table tr>td:first-child{
position:absolute;
width:75px;
left:0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<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>
<div class="form-group  col-xs-12 col-sm-12 col-md-8 col-lg-8">

  <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 id="dailySales" class="table table-responsive"></div>

关于javascript - 如何制作 HTML 表格第一列修复，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55999286/

上一篇：javascript - 使用 JavaScript 滚动标签栏元素

下一篇：javascript - 如何对特定数字中的数字进行分类？

相关文章：

javascript - 如何从路由函数外部获取Nodejs响应对象？

javascript - 防止同一请求多次完成

jquery - CSS3 translateX 不工作

html - Div根据动态输入调整大小

javascript - 在 Angular Directive(指令)、服务和 Controller 之间共享数据

javascript - 获取脚本以返回 HTML 中的链接

jquery - 使用 jQuery 对文本阴影元素进行动画处理

javascript - 数据表实现根本不起作用，Javascript/JQuery

html - 如何不在 <button> 元素中垂直居中文本？

css - 萨斯 :first-child compile error

©2024 IT工具网  联系我们