javascript - 如何在不删除其他 HTML 的情况下显示 display()

Question

var students = [
  ["test", "test", "test"],
  ["test", "test", "test"]
];
students.sort();

function display() {

  for (i = 1; i < students.length + 1; i++) {
    document.write("<tr>");
    document.write("<td>" + (i) + "</td>");
    document.write("<td>" + students[i - 1][0] + "</td>");
    document.write("<td>" + students[i - 1][1] + "</td>");
    document.write("<td>" + students[i - 1][2] + "</td>");
    document.write("<td><input type='number' class='form-control' id='quiz" + i + "' ></td>");
    document.write("<td><input type='number' class='form-control' id='reqt" + i + "'></td>");
    document.write("<td><input type='number' class='form-control' id='exam" + i + "'></td>");
    document.write("<td><input type='number' class='form-control' id='pg" + i + "' readonly></td>");
    document.write("</tr>");
  }
}

function AddData() {
  var AddName;
  var AddCourse;
  var AddBDay;
  var Data;

  AddName = document.getElementById('Addname').value;
  AddCourse = document.getElementById('AddCourse').value;
  AddBDay = document.getElementById('AddBDay').value;

  if (AddName != "" && AddCourse != "" && AddBDay != "") {
    Data = [AddName, AddCourse, AddBDay];
    students.push(Data);
    console.log(students);

    display();

  } else {
    alert("Invalid Input");
  }

}

Answer 1

您还没有发布任何 HTML，但假设您有一个<table id="x">or <tbody id="x">，修改display函数如下：

function display() {

  let html = '';
  students.map((item, i) => {
    html += "<tr>";
    html += "<td>" + (i+1) + "</td>";
    html += "<td>" + item[0] + "</td>";
    html += "<td>" + item[1] + "</td>";
    html += "<td>" + item[2] + "</td>";
    html += "<td><input type='number' class='form-control' id='quiz" + i + "' ></td>";
    html += "<td><input type='number' class='form-control' id='reqt" + i + "'></td>";
    html += "<td><input type='number' class='form-control' id='exam" + i + "'></td>";
    html += "<td><input type='number' class='form-control' id='pg" + i + "' readonly></td>";
    html += "</tr>";
  });  
  document.getElementById("x").innerHTML = html;
}

此外，document.write很少或从未使用过。更多在这里。
element.innerHTML通常用于由于 API 调用或任何其他事件（如您的情况）而执行一些 DOM 操作。

Answer 2

document.write非常非常老派，由于许多原因，它已经很少使用了。

您可以创建一个字符串变量，然后您可以添加（连接）新字符串，或者您可以使用更现代的方法，如下例所示，用于map迭代数组以创建一个新的字符串数组，然后join是该数组最多为一个 HTML 字符串。

const students = [
  ["test", "test", "test"],
  ["test", "test", "test"]
];

function getHtml(students) {
  return students.map(arr => {
    return `
      <tr>
        <td>${arr[0]}</td>
        <td>${arr[1]}</td>
        <td>${arr[2]}</td>
      </tr>
    `
  }).join('');
}

const table = document.querySelector('table');
table.innerHTML = getHtml(students);

<table></table>