Идентификатор не отображается в методе insertAdjacent в JavaScript - PullRequest
Новая
       49

Идентификатор не отображается в методе insertAdjacent в JavaScript

1 голос
/ 01 апреля 2020

Все работает нормально, но в последней строке мой идентификатор не отображается. Отображается как% id%, а не как фактические данные.

ПРОБЛЕМЫ

  1. Я хочу начать идентификатор с 1, но он начинается с 0. Я не могу понять, как это сделать начиная с 1.
  2. Идентификатор не отображается с помощью insertAdjacent HTML. Это последняя строка в коде js. 

//Constructor for student form
var studentForm = function(iD, name, city, college, course, age) {
  this.id = iD;
  this.name = name;
  this.city = city;
  this.college = college;
  this.course = course;
  this.age = age;
}
//all data store here as object
var data = [];

//function to submit and display form
var submitForm = function() {

  //getInput data from the field
  var getInput = {
    name: document.querySelector('.name').value,
    city: document.querySelector('.city').value,
    college: document.querySelector('.college').value,
    course: document.querySelector('.course').value,
    age: document.querySelector('.age').value,
  }

  //store the data which you get previous to use that
  var input = getInput;
  //Create a new id
  var ID;
  if (data.length > 0) {
    ID = data[data.length - 1].id + 1;
  } else {
    ID = 0;
  }
  //Use the constructor and make a new data
  var newForm = new studentForm(ID, input.name, input.city, input.college, input.course, input.age);
  //Add the student data into the ds
  data.push(newForm);
  //Display the data in the Document
  //html line to display data of object
  var html = '<tr><td class="id-%id%">%id%</td><td class="tname">%name%</td><td class="tcity">%city%</td><td class="tcollege">%college%</td><td class="tcourse">%course%</td><td class="tage">%age%</td></tr>';
  //Replace the placeHOlder With actual data
  var newHtml = html;
  newHtml = newHtml.replace('%id%', ID);
  newHtml = newHtml.replace('%name%', input.name);
  newHtml = newHtml.replace('%city%', input.city);
  newHtml = newHtml.replace('%college%', input.college);
  newHtml = newHtml.replace('%course%', input.course);
  newHtml = newHtml.replace('%age%', input.age);
  //Get the element which after you wants to print the data
  document.querySelector('.table-heading').insertAdjacentHTML('afterend', newHtml);

  console.log(newForm);
  return newForm;
}


document.querySelector('.btn').addEventListener('click', submitForm);
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Form</title>
  <style>
    table {
      font-family: arial, sans-serif;
      border-collapse: collapse;
      width: 100%;
    }
    
    td,
    th {
      border: 1px solid #dddddd;
      text-align: left;
      padding: 8px;
    }
    
    tr:nth-child(even) {
      background-color: #dddddd;
    }
  </style>
</head>

<body>
  <input type="text" placeholder="name" class="name">
  <input type="text" placeholder="city" class="city">
  <input type="text" placeholder="college" class="college">
  <input type="text" placeholder="Course" class="course">
  <input type="number" placeholder="age" class="age">
  <input type="button" class="btn" value="submit">
  <div class="table">
    <table class="tablemain">
      <tr class="table-heading">
        <th>ID</th>
        <th>Name</th>
        <th>City</th>
        <th>College</th>
        <th>Course</th>
        <th>Age</th>
      </tr>
    </table>
  </div>

1 Ответ

0 голосов
/ 01 апреля 2020

.replace () функция заменит только первое вхождение, поэтому чтобы этот пример работал, просто удалите% id% из атрибута класса. 

Before: class="id-%id%" <br />After:  class="id"

Демонстрация: Jsfiddle

...