将行附加到网格

Question

我想在用户点击按钮后向该网格添加一行。我尝试过使用一些简单的JavaScript和innerHTML，其中我将使用HTML格式化的字符串分配给最后一行末尾的空div部分（"appendDataHere"）。我遇到的问题是该行没有直接附加在它的标题行下面 - 无论我如何使用<div>标记，都会有一个空白。我还希望能够继续添加行而不删除之前添加的行。

function appendData() {
  var driver = document.getElementById("selDriver").value;
  var pickup = document.getElementById("selPickup").value;
  var dropOff = document.getElementById("selDropOff").value;
  var numPsngers = document.getElementById("selNumPsngers").value;
  document.getElementById("appendDataHere").innerHTML =
    "<div class=\"grid-item\">" + driver +
    "</div><div class=\"grid-item\">" + pickup +
    "</div><div class=\"grid-item\">" + dropOff +
    "</div><div class=\"grid-item\">" + numPsngers +
    "</div><div class=\"grid-item\">7:03:00 PM" +
    "</div><div class=\"grid-item\"><input type=\"checkbox\" name=\"noShow\" value=\"showedUp\">" +
    "</div><div class=\"grid-item\"><input type=\"submit\" value=\"Complete\"></div>";
}

.grid-item {
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 20px;
  text-align: center;
}

.grid-container-two {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto auto;
  padding: 5px;
  margin-top: 50px;
  margin-bottom: 50px;
  margin-right: 150px;
  margin-left: 150px;
}

.grid-item-header-two {
  background-color: #00cc00;
  color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 20px;
  text-align: center;
}

<div class="grid-container">
  <div class="grid-item-header">Assigned To
  </div>
  <div class="grid-item-header">From
  </div>
  <div class="grid-item-header">To
  </div>
  <div class="grid-item-header">Num Passengers
  </div>
  <div class="grid-item-header">Assign
  </div>
  <div class="grid-item">
    <select id="selDriver">
      <option value="d0">Dr0</option>
      <option value="d1">Dr1</option>
      <option value="d2">Dr2</option>
    </select>
  </div>
  <div class="grid-item">
    <select id="selPickup">
      <option value="onetwothreeMain">123 Main Street</option>
      <option value="sixhundredpence">1600 Penn. Ave</option>
    </select>
  </div>
  <div class="grid-item">
    <select id="selDropOff">
      <option value="onetwothreeMain">123 Main Street</option>
      <option value="sixhundredpence">1600 Penn. Ave</option>
    </select>
  </div>
  <div class="grid-item">
    <select id="selNumPsngers">
      <option value="one">1</option>
      <option value="two">2</option>
    </select>
  </div>
  <div class="grid-item">
    <input type="submit" value="+" onclick="appendData()">
  </div>
</div>

<div class="grid-container-two">
  <div class="grid-item-header-two">Assigned To</div>
  <div class="grid-item-header-two">From</div>
  <div class="grid-item-header-two">To</div>
  <div class="grid-item-header-two">Num Passengers</div>
  <div class="grid-item-header-two">Time</div>
  <div class="grid-item-header-two">No Show</div>
  <div class="grid-item-header-two">Complete</div>
  <div id="appendDataHere">
  </div>
</div>

Answer 1

希望这对您有所帮助，您需要更多的CSS来修复行之间的差距，但现在它正如您预期的那样工作。

我在+=之前添加了少量innerHTML，以便您可以追加越来越多，如果您不想追加多个，只需按照之前的方式（在问题中）进行分配即可。

我在div的层次结构中已经改变了，以获得结果。

function appendData() {
  var driver = "driver val"
  var pickup = "pickup val"
  var dropOff = "drop off val"
  var numPsngers = "num of pssngr"
  document.getElementById("table_id").innerHTML +=
    "<tr> <td class=\"grid-item\">" + driver +
    "</td><td class=\"grid-item\">" + pickup +
    "</td><td class=\"grid-item\">" + dropOff +
    "</td><td class=\"grid-item\">" + numPsngers +
    "</td><td class=\"grid-item\">7:03:00 PM" +
    "</td><td class=\"grid-item\"><input type=\"checkbox\" name=\"noShow\" value=\"showedUp\" />" +
    "</td><td class=\"grid-item\"><input type=\"submit\" value=\"Complete\" /></td> </tr>";
}

.grid-item {
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.8);
  text-align: center;
  padding-top: 5px;
  padding-bottom: 5px;
}

.grid-item-header-two {
  background-color: #00cc00;
  color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 20px;
  text-align: center;
}

<button onClick="appendData()">Add</button>
<table id="table_id">
  <tr>
    <td class="grid-item-header-two">Assigned To</td>
    <td class="grid-item-header-two">From</td>
    <td class="grid-item-header-two">To</td>
    <td class="grid-item-header-two">Num Passengers</td>
    <td class="grid-item-header-two">Time</td>
    <td class="grid-item-header-two">No Show</td>
    <td class="grid-item-header-two">Complete</td>
  </tr>
</table>