javascript - 将行附加到网格

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>