无法创建所需的用户界面

Question

我正在创建一个由一些下拉列表和一个表格组成的UI，但是由于缺乏Bootstrap和网格系统的知识，因此无法正确对齐它们

到目前为止，我所做的是：

SNIPPET

$(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网格系统，但没有成功，我必须制造多个容器，因为下拉列表未正确对齐。

Answer 1

我从您的图片创建代码，我不更改任何jquery文件

首先，我给表格设置100的宽度，然后为所有屏幕并排放置下拉菜单，并创建漂亮的自举下拉菜单外观。

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