Я хочу добавить строку в эту сетку после того, как пользователь нажмет кнопку. Я пробовал использовать простой 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>Добавлен JavaScript.
Вам следует изменить: <div class = "appendDataHere"></div> на <div id = "appendDataHere"></div>.
Не могли бы вы добавить достаточно кода, чтобы воспроизвести вашу проблему? Я не вижу элемента с идентификатором selDriver, selPickup. Где называется appendData?
Добавлен еще код и снимок экрана с проблемой.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Надеюсь, это поможет вам, вам нужно еще немного 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>
пожалуйста, добавьте javascript, который вы используете.