我有一个任务来动态显示已完成的HTML表行,我有一个thead
,tbody
和tfoot
,这三个都位于不同的表中,因为我想要使tbody
在一定高度后滚动
表说明
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>
它显示如下:
我认为我经常搞砸CSS,而按%
的宽度做的却是重叠的。
答案 0 :(得分:-1)
似乎CSS确实弄乱了您的表。 尽量不要使用固定宽度(80px),而应尝试使用%宽度。