1

一切正常，但在最后一行我的 id 没有显示。它显示的是 %id% 而不是实际数据。

问题

  1. 我想从 1 开始 id 但它从 0 开始。我不明白如何让它从 1 开始。
  2. insertAdjacentHTML 未显示 ID。它在 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>

4

1 回答 1

0

.replace() 函数只会替换第一次出现，所以要使这个例子正常工作，只需从类属性中删除 %id% 。

Before: class="id-%id%" 
After:  class="id"

演示：Jsfiddle

于 2020-04-01T14:21:47.080 回答