Добавить строку в сетку

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

Ratul Sharker 14.04.2018 20:52

Добавлен JavaScript.

beh1 14.04.2018 21:04

Вам следует изменить: <div class = "appendDataHere"></div> на <div id = "appendDataHere"></div>.

Danny Fardy Jhonston Bermúdez 14.04.2018 21:06

Не могли бы вы добавить достаточно кода, чтобы воспроизвести вашу проблему? Я не вижу элемента с идентификатором selDriver, selPickup. Где называется appendData?

Vadim Ovchinnikov 14.04.2018 21:15

Добавлен еще код и снимок экрана с проблемой.

beh1 14.04.2018 21:53
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
5
965
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

Другие вопросы по теме