HTML表格列显示不正确

时间:2019-08-01 05:49:51

标签: javascript jquery html css html-table

我有一个任务来动态显示已完成的HTML表行,我有一个theadtbodytfoot,这三个都位于不同的表中,因为我想要使tbody在一定高度后滚动

表说明

  • 在第一个表格中,我只有thead,而在最后一个表格中,我只有tfoot,正在计算一些总数
  • 主要的是第二个,这是动态创建的,页面加载时创建的第一行的输入字段为Cells
  • 某些输入字段是可编辑的,有些不是由于要求
  • 该行的最后一个输入字段是Disc%,如果用户按Enter键,我要创建新行,则每行的第一个单元格是ItemName,这是Jquery自动完成功能,因此用户要输入内容并选择一些itemName,然后在按Tab时相应地填充一些字段

我要做什么

  • 第二张桌子的高度为tbody,它的高度为overflow:auto,以便在一定高度后滚动。

  • 问题在于,即使我分别给所有样式赋予样式,所有的列也不是一致对齐的

  • 当Scroll出现时,tbody也会缩小,即使它们都位于同一div

代码

function format(number, decimals = 2) {
  const fixed = parseFloat(number).toFixed(decimals);
  const [float, dec] = fixed.split('.')
  const intFormatted = (+float)
  return intFormatted + (dec ? '.' + dec : '');
}


$(document).ready(function() {


  var tableData = {};
  var tabledata = {
    "ALMOND CHBAR~2402": {
      "itemName": "ALMOND CHBAR",
      "itemCode": "2402",
      "costPrice": 20.0,
      "gstPercentage": 14.5,
      "unitCode": "NOS",
      "mrp": 30.0
    },
    "A BR SB EX~333": {
      "itemName": "A BR SB EX",
      "itemCode": "333",
      "costPrice": 1.0,
      "gstPercentage": 0.0,
      "unitCode": "NOS",
      "mrp": 1.0
    }
  }

  populateData(tabledata)

  function rowappendThead(thead) {

    const theadymarkup =
      `<tr>
									<th id="itemNameth" class="commanth">Item Name</th>
									<th id="itemCodeth" class="commanth">I Code</th>
									<th id="mrpth" class="commanth">MRP</th>
									<th id="purRateth" class="commanth">Price</th>
									<th id="unitQtyth" class="commanth">Unit Qty</th>
									<th id="discPercentageth" class="commanth">Disc %</th>
									<th id="discAmtth" class="commanth">Disc Amt</th>
									<th id="gstPercentageth" class="commanth">GST %</th>
									<th id="gstAmtth" class="commanth">GST Amt</th>
									<th id="totalAmtth" class="commanth">Total Amt</th>
									<th style="background-color: white;border: 1px solid white"></th> 

								</tr>`

    $(thead).append(theadymarkup);

  }

  function rowappend(tbody) {

    const markup =
      `<tr>
											  <td>
											    <input type="text" class="form-control commanChange" id="itemNametd" name="itemNametd">
											  </td>
											  <td><input type="text" name="itemCodetd" id="itemCodetd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
											  <td><input type="text" name="mrptd" id="mrptd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
											  <td><input type="tel"  id="purRatetd"  class="form-control commantd"name="purRatetd"></td>
											  <td>
											    <input type="tel" id="unitQtytd"class="form-control commanChange" name="unitQtytd">
											  </td>
								               			 
											  <td>
											    <input type="tel" id="discPercentagetd"class="form-control commanChange" name="discPercentagetd" value="0.00">
											  </td>
											  <td><input type="text" name="discAmttd" id="discAmttd" class="form-control commantd" readonly="readonly" tabindex="-1"></td> 
											  <td><input type="text" name="gstPercentagetd" id="gstPercentagetd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
											  <td><input type="text" name="gstAmttd" id="gstAmttd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
											  <td><input type="text" name="totalAmttd" id="totalAmttd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
											  <input type="hidden" name="unittd" id="unittd" class="form-control commantd">
											  <td style="background-color: white;border: 1px white"><i class="fas fa-times fa-2x remove-btn" ></i></td>
											  
											</tr>`

    $(tbody).append(markup);
    setTimeout(() => $("[name=itemNametd]", tbody).last().focus(), 100);

    var autoCompleteData = Object.keys(tableData);
    $("[name=itemNametd]", tbody).last().autocomplete({
      source: autoCompleteData,
      autoSelectFirst: true,
      autoFocus: true

    }).data('tableData', tableData);


  }

  function rowappendTfoot(tfoot) {

    const tfootmarkup =
      `<tr>
	<td id="itemNametf" class="commantf" align="center">Total ->
	</td>
	<td id="itemCodetf" class="commantf"></td>
	<td id="mrptf" class="commantd"></td>
	<td id="purRatetf" class="commantf"></td>
	<td id="unitQtytf" class="commantf"></td>
	<td id="discPercentagetf" class="commantf"></td>	
	<td id="discAmttf" class="commantf"></td>
	<td id="gstPercentagetf" class="commantf"></td>
	<td id="gstAmttf" class="commantf"></td>
	<td id="totalAmttf" class="commantf"></td>
	<td id="crossBtntf" class="commantf"><span class="rupee"></span></td>
</tr>`

    $(tfoot).append(tfootmarkup);

  }

  function getValues(row) {
    const search = ($('[name=itemNametd]', row).val()).toString()

    var data = $('[name=itemNametd]', row).data('tableData');
    const value = data[search];

    if (value) {
      CostPrice = value.costPrice;
      $(row).find("[name=itemCodetd]").val(value.itemCode);
      $(row).find("[name=mrptd]").val(format(value.mrp));
      $(row).find("[name=purRatetd]").val(format(CostPrice));
      $(row).find("[name=unittd]").val(value.unitCode);
      $(row).find("[name=gstPercentagetd]").val(value.gstPercentage);
      $("[name=purRatetd]").focus();
    }

  }


  document.addEventListener("keydown", function(e) {
    const row = event.target.parentElement.parentElement

    var keycode = event.keyCode || event.which;
    if (keycode == '13') {
      if (!$(event.target).val()) {
        e.preventDefault();
        return;
      }
      const row = e.target.parentElement.parentElement
      if (event.target.matches('[name=discPercentagetd]')) {
        if ($(row).parent().find('tr').length - $(row).index() === 1) {
          rowappend(event.target.parentElement.parentElement.parentElement)
        }
      }
    }

  });

  $(document).on("focusout", "[name=itemNametd]", function(e) {
    const row = e.target.parentElement.parentElement
    getValues(e.target.parentElement.parentElement)
  });

  function populateData(data) {
    tableData = Object.assign({}, data);
    var autoCompleteData = Object.keys(data);
    rowappendThead($('thead', '#tableInvoice'));
    rowappend($('tbody', '#tbodyScroll'));
    rowappendTfoot($('tfoot', '#tfootTable'));

  }




});
input[type=tel] {
  text-align: right;
}

#itemNameth {
  width: 370px;
}

#itemNametd {
  width: 398px;
}

#itemNametf {
  width: 348px;
}

#itemCodetf,
#itemCodetd,
#mrptf,
#mrptd,
#purRatetf,
#purRatetd,
#discAmttf,
#discAmttd,
#gstAmttf,
#gstAmttd,
#gstPercentagetf,
#gstPercentagetd,
#unitQtytd,
#discPercentagetd,
#unitQtytf,
#discPercentagetf {
  font-size: 10pt;
  color: black;
  text-align: right;
}

#itemCodeth {
  width: 60px;
}

#itemCodetf {
  width: 57px;
}

#itemCodetd {
  width: 63px;
}

#unitQtyth {
  width: 60px;
}

#unitQtytf {
  width: 60px;
}

#unitQtytd {
  width: 60px;
}

#discPercentagetd {
  width: 60px;
}

#discPercentageth {
  width: 60px;
}

#discPercentagetf {
  width: 60px;
}

#mrpth {
  width: 60px;
}

#mrptf {
  width: 55px;
}

#mrptd {
  width: 63px;
}

#purRateth {
  width: 70px;
}

#purRatetf {
  width: 65px;
}

#purRatetd {
  width: 73px;
}

#discAmtth {
  width: 70px;
}

#discAmttf {
  width: 70px;
}

#discAmttd {
  width: 70px;
}

#gstAmtth {
  width: 80px;
}

#gstAmttf {
  width: 80px;
}

#gstAmttd {
  width: 80px;
}

#gstPercentageth {
  width: 40px;
}

#gstPercentagetf {
  width: 60px;
}

#gstPercentagetd {
  width: 60px;
}

#totalAmttd {
  width: 130px;
  font-size: 10pt;
  color: black;
  font-weight: bold;
  text-align: right;
  background-color: #C4B7C7;
}

#totalAmttf {
  width: 105px;
  font-size: 10pt;
  color: black;
  font-weight: bold;
  text-align: right;
  background-color: #C4B7C7;
}

#totalAmtth {
  width: 130px;
}

#itemNametd {
  font-size: 10pt;
}

#crossBtntf {
  width: 25px;
  background-color: white;
  border: 1px white;
}

#itemNametf,
#totalAmttf {
  color: black;
  font-weight: bold;
}

table {
  border-collapse: collapse !important;
}

table.table-bordered>thead>tr>th {
  border: 1px solid white;
  white-space: nowrap;
  font-family: Verdana;
  font-size: 9pt;
  padding: 0px 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;
  font-family: Verdana;
  font-size: 8pt;
  background-color: rgba(84, 83, 72, .1);
  padding: 0px 5px 5px 5px;
  color: black;
}

table.table-bordered>tfoot>tr>td {
  border: 1px solid black;
  white-space: nowrap;
  border-collapse: separate !important;
  font-family: Verdana;
  font-size: 8pt;
  background-color: #8c8edf;
  padding: 0px 5px 5px 5px;
}
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="row tableGrn">
  <div id="printFull">
    <div align="right">
      <table class="table table-bordered" id="tableInvoice">
        <thead>

        </thead>


      </table>
      <div style="height: 30px; overflow-y: auto;">
        <table id="tbodyScroll">
          <thead>
          </thead>
          <tbody>
          </tbody>
        </table>
      </div>

    </div>
  </div>

  <div class="row">
    <table class="table table-bordered" id="tfootTable">
      <tbody>

      </tbody>
      <tfoot>


      </tfoot>
    </table>
  </div>
</div>

它显示如下:

This

我认为我经常搞砸CSS,而按%的宽度做的却是重叠的。

1 个答案:

答案 0 :(得分:-1)

似乎CSS确实弄乱了您的表。 尽量不要使用固定宽度(80px),而应尝试使用%宽度。