我正在创建一个由一些下拉菜单和一个表格组成的 UI，但由于缺乏 Bootstrap 和网格系统方面的知识而无法正确对齐它们
到目前为止我所做的是:
片段
$(document).ready(function() {
var tableData = [{
"Category Code": "C001",
"Category Name": "Beverages",
"Quantity": "3174.0000"
},
{
"Category Code": "C003",
"Category Name": "Juices",
"Quantity": "36.0000"
},
{
"Category Code": "C004",
"Category Name": "Soups",
"Quantity": "5.0000"
},
{
"Category Code": "C005",
"Category Name": "Cookies",
"Quantity": "10.0000"
},
{
"Category Code": "C006",
"Category Name": "Buns",
"Quantity": "258.0000"
},
{
"Category Code": "C007",
"Category Name": "Breads",
"Quantity": "184.0000"
},
{
"Category Code": "C008",
"Category Name": "Rusks",
"Quantity": "62.0000"
},
{
"Category Code": "C009",
"Category Name": "Biscuits",
"Quantity": "55.0000"
},
{
"Category Code": "C010",
"Category Name": "Puff",
"Quantity": "53.0000"
},
{
"Category Code": "C011",
"Category Name": "Savouries",
"Quantity": "343.2500"
},
{
"Category Code": "C012",
"Category Name": "Cake",
"Quantity": "19.0000"
}
]
function addTable(tableValue) {
var col = Object.keys(tableValue[0]);
var countNum = col.filter(i => !isNaN(i)).length;
var num = col.splice(0, countNum);
col = col.concat(num);
var table = document.createElement("table");
var tr = table.insertRow(-1); // TABLE ROW.
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th"); // TABLE HEADER.
th.innerHTML = col[i];
tr.appendChild(th);
tr.classList.add("text-center");
tr.classList.add("head")
}
for (var i = 0; i < tableValue.length; i++) {
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++) {
let tabCell = tr.insertCell(-1);
var tabledata = tableValue[i][col[j]];
if (tabledata && !isNaN(tabledata)) {
tabledata = parseInt(tabledata).toLocaleString('en-in')
}
if (tableData[i]['Quantity'] === tableData[i][col[j]]) {
let activeCell = null;
tabCell.addEventListener('dblclick', function() {
if (this.childElementCount == 0) {
let input = document.createElement('input');
input.setAttribute('type', 'textbox');
input.setAttribute('value', this.innerHTML);
this.innerHTML = "";
this.appendChild(input);
activeCell = this;
}
});
tabCell.innerHTML = tabledata;
} else {
span = document.createElement("span");
span.innerHTML = tabledata;
tabCell.appendChild(span)
}
if (j > 1)
tabCell.classList.add("text-right");
}
}
var divContainer = document.getElementById("HourlysalesSummary");
divContainer.innerHTML = "";
divContainer.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
table.classList.add("table-hover");
}
addTable(tableData);
});head.table-bordered>tbody>tr>td,
table.table-bordered>tbody>tr>th {
border: 1px solid white;
white-space: nowrap;
border-collapse: collapse;
font-family: Verdana;
font-size: 9pt;
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;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.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="container ">
<form>
<div class="row">
<div class="col-lg-3">
<h5>Outlet</h5>
<select>
<option>1</option>
<option>25</option>
<option>5</option>
</select>
</div>
<div class="col-lg-3">
<h5>Category</h5>
<select>
<option>1</option>
<option>25</option>
<option>5</option>
</select>
</div>
</div>
<div class="row table table-responsive">
<table id="HourlysalesSummary"></table>
</div>
</form>
</div>我想要实现的是这样的
我已经尝试过 Bootstrap 网格系统但没有成功，我必须制作几个容器，因为下拉菜单没有正确对齐。
最佳答案
我根据你的图像创建代码，我不更改任何 jquery 文件
首先，我给表格设置了 100 宽度，然后为所有屏幕制作并排下拉菜单，然后创建漂亮的 bootstrap 下拉菜单外观。
$(document).ready(function() {
var tableData = [{
"Category Code": "C001",
"Category Name": "Beverages",
"Quantity": "3174.0000"
},
{
"Category Code": "C003",
"Category Name": "Juices",
"Quantity": "36.0000"
},
{
"Category Code": "C004",
"Category Name": "Soups",
"Quantity": "5.0000"
},
{
"Category Code": "C005",
"Category Name": "Cookies",
"Quantity": "10.0000"
},
{
"Category Code": "C006",
"Category Name": "Buns",
"Quantity": "258.0000"
},
{
"Category Code": "C007",
"Category Name": "Breads",
"Quantity": "184.0000"
},
{
"Category Code": "C008",
"Category Name": "Rusks",
"Quantity": "62.0000"
},
{
"Category Code": "C009",
"Category Name": "Biscuits",
"Quantity": "55.0000"
},
{
"Category Code": "C010",
"Category Name": "Puff",
"Quantity": "53.0000"
},
{
"Category Code": "C011",
"Category Name": "Savouries",
"Quantity": "343.2500"
},
{
"Category Code": "C012",
"Category Name": "Cake",
"Quantity": "19.0000"
}
]
function addTable(tableValue) {
var col = Object.keys(tableValue[0]);
var countNum = col.filter(i => !isNaN(i)).length;
var num = col.splice(0, countNum);
col = col.concat(num);
var table = document.createElement("table");
var tr = table.insertRow(-1); // TABLE ROW.
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th"); // TABLE HEADER.
th.innerHTML = col[i];
tr.appendChild(th);
tr.classList.add("text-center");
tr.classList.add("head")
}
for (var i = 0; i < tableValue.length; i++) {
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++) {
let tabCell = tr.insertCell(-1);
var tabledata = tableValue[i][col[j]];
if (tabledata && !isNaN(tabledata)) {
tabledata = parseInt(tabledata).toLocaleString('en-in')
}
if (tableData[i]['Quantity'] === tableData[i][col[j]]) {
let activeCell = null;
tabCell.addEventListener('dblclick', function() {
if (this.childElementCount == 0) {
let input = document.createElement('input');
input.setAttribute('type', 'textbox');
input.setAttribute('value', this.innerHTML);
this.innerHTML = "";
this.appendChild(input);
activeCell = this;
}
});
tabCell.innerHTML = tabledata;
} else {
span = document.createElement("span");
span.innerHTML = tabledata;
tabCell.appendChild(span)
}
if (j > 1)
tabCell.classList.add("text-right");
}
}
var divContainer = document.getElementById("HourlysalesSummary");
divContainer.innerHTML = "";
divContainer.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
table.classList.add("table-hover");
}
addTable(tableData);
});head.table-bordered>tbody>tr>td,
table.table-bordered>tbody>tr>th {
border: 1px solid white;
white-space: nowrap;
border-collapse: collapse;
font-family: Verdana;
font-size: 9pt;
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;
}
.container {
border: 1px solid black;
}
.brder {
border-bottom: 1px solid black;
}
.brder select {
position: absolute;
top: 50%;
transform: translateY(-50%);
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="container">
<form>
<div class="row position-relative">
<div class="col-4 brder p-2">
<h5>Outlet</h5>
</div>
<div class="col-8 brder">
<select class="form-control offset-4 col-4">
<option>1</option>
<option>25</option>
<option>5</option>
</select>
</div>
<div class="col-4 brder p-2">
<h5>Category</h5>
</div>
<div class="col-8 text-center brder">
<select class="form-control offset-4 col-4">
<option>1</option>
<option>25</option>
<option>5</option>
</select>
</div>
</div>
<br>
<div class="table table-responsive">
<table class="w-100" id="HourlysalesSummary"></table>
</div>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.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.3/js/bootstrap.min.js"></script>关于javascript - 无法创建所需的 UI，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54109444/