Невозможно вставить запись в таблицу HTML через JavaScript - PullRequest
Новая
       80

Невозможно вставить запись в таблицу HTML через JavaScript

0 голосов
/ 12 июля 2020

Я пытаюсь создать простой CRUD, используя чистый JavaScript, и я не знаю, почему моя запись не обновляется, когда я нажимаю кнопку «Отправить» и сбрасываю все поля на странице. Я попытался проверить, есть ли журнал ошибок, который может появиться на консоли, но ничего не появилось.

Вот мой HTML: 

<h1>Basic CRUD</h1>
<form
  onsubmit="event.preventDefualt(); onFormSubmit()"
  autocomplete="off"
  id="form"
>
  <div class="form-group">
    <label for="">First name: </label>
    <input type="text" class="col-xs-3" name="first_name" id="first_name" />
  </div>
  <div class="form-group">
    <label for="">Last name: </label>
    <input type="text" class="col-xs-3" name="last_name" id="last_name" />
  </div>
  <div class="form-group">
    <label for=""
      >Gender:
      <input
        type="radio"
        name="genderRAD"
        id="male"
        style="margin-left: 20px;"
      />
      Male
      <input
        type="radio"
        name="genderRAD"
        id="Female"
        style="margin-left: 20px;"
      />
      Female</label
    >
  </div>
  <div class="form-group">
    <label for="">Address: </label>
    <input
      type="text"
      class="col-xs-3"
      style="margin-left: 18px;"
      name="address"
      id="address"
    />
  </div>
  <div class="form-group col-xs-1">
    <input type="submit" class="btn btn-primary btn-md" value="Submit" />
    <input
      type="button"
      class="btn btn-danger"
      value="Clear"
      onClick="btnClear()"
      ;
    />
  </div>

  <div class="form-group">
    <table class="table" id="userList">
      <thead>
        <tr>
          <th>
            First name
          </th>
          <th>
            Last name
          </th>
          <th>
            Gender
          </th>
          <th>
            Address
          </th>
          <th>
            Action
          </th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </div>
</form>

Вот мой JavaScript код : 

function btnClear() {
  document.getElementById("form").reset();
}

function onFormSubmit() {
  var userData = addUser();
  insertRecord(userData);
}

function addUser() {
  var userData = {};
  userData["fName"] = document.getElementsById("firstname").value;
  userData["lName"] = document.getElementsById("lastname").value;
  userData["gender"] = document.getElementsById("genderRAD").value;
  userData["address"] = document.getElementsById("address").value;
  return userData;
}

function insertRecord(data) {
  var table = document
    .getElementsById("userList")
    .document.getElementsByTagName("tbody")[0];
  var newRow = table.insertRow(table.length);
  cell1 = newRow.insertCell(0);
  cell1.innerHTML = data.fname;
  cell2 = newRow.insertCell(1);
  cell2.innerHTML = data.lName;
  cell3 = newRow.insertCell(2);
  cell3.innerHTML = data.gender;
  cell4 = newRow.insertCell(3);
  cell4.innerHTML = data.address;
  cell5 = newRow.insertCell(4);
  cell5.innerHTML = `<input type='button' class='btn btn-primary' value='Edit'>
                       <input type='button' class='btn btn-danger' value='Delete'>`;
}

Ответы [ 2 ]

0 голосов
/ 12 июля 2020

С одной стороны, есть небольшая опечатка: «event.preventDefualt ()» должно быть «event.preventDefault ()»

Эта опечатка объясняет, почему вы не видите никаких ошибок консоли. Исправьте это, и остальное станет более ясным.

0 голосов
/ 12 июля 2020

в вашем коде javascript в функции insertRecord:

  • нет функции: document.getElement s ById

изменить на document.getElementById

  • взять тело из элемента таблицы , а не из документа .

изменить: 

 var table = document
    .getElementsById('userList')
    .document.getElementsByTagName('tbody')[0];

на: 

 var table = document
            .getElementById('userList')
            .getElementsByTagName('tbody')[0];
...