1

Всем привет! Помогите сделать добавление данных с input в таблицу. Данные должны добавляться динамически и сохраняться пока не будет обновлена страничка. Реализовать это нужно только при помощи чистого JS. Создал функцию, но не уверен что это будет работать.

<!DOCTYPE html>
<html>
<head>
<title></title>
<script >

 function average () {
    this.name = document.querySelector('#baza').value;
    this.petrol = document.querySelector("#petrol").value;
    this.cars = document.querySelector('#cars').value;
    this.aver = petrol/cars;

/*Вот тут пошли проблемки:*/
    var name = document.createElement("th");
    name.append() 




</script>
</head>

<body>

<form id= "average">
Автобаза:
<input name="baza" id="baza"  value=""><br/><br/>
Использовали топлива: 
<input name="petrol" id="petrol"  value=""><br/><br/>
Количество авто:
<input name="cars" id="cars" value=""><br/><br/>

<input type="button" value="Считать" onclick= 'average()'>  
<br/>
</form>

<table style="border: 1px solid black">
<thead>
    <tr>
        <th>Автобаза</th>
        <th>Использовали бензина</th>
        <th>Количество авто</th>
        <th>Средний расход топлива</th>
    </tr>
</thead>
<tbody>
    <td><span id="baza"></span></td>
    <td><span id="petrol"></span></td>
    <td><span id="cars"></span></td>
    <td><span id="aver"></span></td>
</tbody>
</table>


</body>
</html>
2
  • Надо без jQuery?
    – Qwertiy
    5 мар 2017 в 21:49
  • 1
    @Qwertiy Да. Желательно без него, но если это будет не возможно, тогда уже можно подключить...
    – Nikita
    5 мар 2017 в 21:52

1 ответ 1

1

В виде сниппета не работает из-за настроек безопасности, но вообще всё хорошо.

https://jsfiddle.net/3dyoqgfn/

document.getElementById('average').addEventListener('submit', function (event) {
  event.preventDefault();
  
  var tr = document.createElement("tr");
  var cols = ['baza', 'petrol', 'cars'];
  
  for (var q=0; q<cols.length; ++q) {
    var td = document.createElement("td");
    td.textContent = document.getElementById(cols[q]).value;
    tr.appendChild(td);
  }

  var td = document.createElement("td");
  td.textContent = "Понятия не имею";
  tr.appendChild(td);

  document.getElementById('dest').appendChild(tr);
});
label {
  display: block;
  margin-bottom: .5em;
}
<form id="average">
  <label>Автобаза: <input name="baza" id="baza" value=""></label>
  <label>Использовали топлива: <input name="petrol" id="petrol" value=""></label>
  <label>Количество авто: <input name="cars" id="cars" value=""></label>
  <input type="submit" value="Считать">
</form>

<table>
  <thead>
    <tr>
      <th>Автобаза</th>
      <th>Использовали бензина</th>
      <th>Количество авто</th>
      <th>Средний расход топлива</th>
    </tr>
  </thead>
  <tbody id="dest">
  </tbody>
</table>

3
  • Все равно не хочет добавлять в таблицу.
    – Nikita
    5 мар 2017 в 22:07
  • @Nikita, всё хочет и добавляет: jsfiddle.net/3dyoqgfn
    – Qwertiy
    5 мар 2017 в 22:09
  • А нет, прости! Моя косяк был! Спасибо тебе огромное за помощь!
    – Nikita
    5 мар 2017 в 22:09

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.