Question

我对使用HTML生成DOM个网页有疑问，我有一些code来显示我的问题，我尝试使用{{创建新的student 1}}和 页面不显示任何内容 ，创建school.prototype.createStudent后，我需要它出现在 学生列表中 与student如果我想尝试删除和 ，请参阅 ，我需要选择学生 选中复选框

我需要按照这些示例创建包含checkbox和DOM

的脚本

Javascript

function Student(id) {
  this.id = id;
}

function School(id) {
  this.id = id;
  this.index = 0;
  this.students = [];
}

/*School.prototype.createStudent = function() {
    this.students.push(new Student(this.index++);
    };*/


function Unload_Document() {

  var div = document.createElement("div");
  div.id = "school";

  var h1 = document.createElement("h1");
  h1.style.color = "red";

  var title = document.createTextNode("High School");
  h1.appendChild(title);

  var h3 = document.createElement("h3");
  h3.style.color = "blue";

  var subtitle = document.createTextNode("List Of Students:");
  h3.appendChild(subtitle);

  div.appendChild(h1);
  div.appendChild(h3);

  /*if (this.students.length !== 0) {

    for (var i = 0; i < this.students.length; i++) {
      var chkbox = document.createElement("input");
      chkbox.type = "checkbox";
      chkbox.name = "Student" + this.students[i].id;
      chkbox.id = this.students[i].id;
      div.appendChild(chkbox);
    }
  } else {
    return " ";
  }*/


  var btnCreate = document.createElement("button");
  var btnCreateText = document.createTextNode("Create");
  btnCreate.appendChild(btnCreateText);
  btnCreate.onclick = function() {
    School.createStudent();

  }

  var btnRemove = document.createElement("button");
  var btnRemoveText = document.createTextNode("Remove");
  btnRemove.appendChild(btnRemoveText);
  btnRemove.onclick = function() {

  }


  var btnInf = document.createElement("button");
  var btnInfText = document.createTextNode("Student Information");
  btnInf.appendChild(btnInfText);
  btnInf.onclick = function() {

  }

  div.appendChild(btnCreate);
  div.appendChild(btnRemove);
  div.appendChild(btnInf);

  document.body.appendChild(div);
};


window.onload = function() {
  Unload_Document();
};

#school {
  display: inline-table;
  vertical-align: middle;
  text-align: left;
}
[id] h1 {
  font-size: 60px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
[id] h3 {
  font-size: 40px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
[id] button {
  margin: 2px;
  background-color: #0000ff;
  font-size: 14px;
  font-weight: bold;
  color: white;
}

Answer 1

这真的不完美，需要调整，但它有效。首先，您忘记创建School对象（我使用名为school的变量）。其次，我在学校创建中移动了加载代码（可能会从那里提取一些代码）。其次，我添加了一个showStudent函数（如果初始加载使用create也可以连接创建）。根据torazaburo的建议，你应该通过基础教程练习更多。

＆＃13;

var school = new School(1);

function Student(id) {
  this.id = id;
  this.div = null;
}

function School(id) {
  this.id = id;
  this.index = 0;
  this.students = {};
  this.studentsList = document.createElement('DIV');

  var self = this;
  Unload_Document();

  function Unload_Document() {

    var div = document.createElement("div");
    div.id = "school";

    var h1 = document.createElement("h1");
    h1.style.color = "red";

    var title = document.createTextNode("High School");
    h1.appendChild(title);

    var h3 = document.createElement("h3");
    h3.style.color = "blue";

    var subtitle = document.createTextNode("List Of Students:");
    h3.appendChild(subtitle);

    div.appendChild(h1);
    div.appendChild(h3);

    div.appendChild(self.studentsList);


    var btnCreate = document.createElement("button");
    var btnCreateText = document.createTextNode("Create");
    btnCreate.appendChild(btnCreateText);
    btnCreate.onclick = function() {
      school.createStudent();

    }

    var btnRemove = document.createElement("button");
    var btnRemoveText = document.createTextNode("Remove");
    btnRemove.appendChild(btnRemoveText);
    btnRemove.onclick = function() {
      school.removeStudents();
    }


    var btnInf = document.createElement("button");
    var btnInfText = document.createTextNode("Student Information");
    btnInf.appendChild(btnInfText);
    btnInf.onclick = function() {
      school.studentInformation();
    }

    div.appendChild(btnCreate);
    div.appendChild(btnRemove);
    div.appendChild(btnInf);

    document.body.appendChild(div);
  };

}

School.prototype.createStudent = function() {
  this.students[this.index] = new Student(this.index);
  this.showStudent(this.index);
  this.index++;
};

School.prototype.showStudent = function(id) {
  var div = document.createElement('div');
  div["data-id"] = this.students[id].id;

  var chkbox = document.createElement("input");
  chkbox.type = "checkbox";
  chkbox.name = "Student" + this.students[id].id;
  chkbox.id = chkbox.name;
  div.appendChild(chkbox);

  var chkText = document.createTextNode("Student " + this.students[id].id);
  div.appendChild(chkText);

  this.students[id].div = div;
  this.studentsList.appendChild(div);
};

School.prototype.removeStudents = function(id) {
  //this call the function to remove the students
  var totalRemoved = 0;
  for(var studentElementIndex in this.studentsList.childNodes) {
     var studentElement = this.studentsList.childNodes[studentElementIndex - totalRemoved];
     if (studentElement.childNodes[0].checked) {
        this.removeStudent(studentElement['data-id']);
        totalRemoved++;
     }
  }
};

School.prototype.removeStudent = function(id) {
  //this call the function to remove the students
  if (!this.students[id]) return;

  if (this.students[id].div != null)
     this.studentsList.removeChild(this.students[id].div);

  delete this.students[id];
};


School.prototype.studentInformation = function() {
  //this call the arguments to create the new html pages
  alert("this call the arguments to create the new html pages");
};

＆＃13;

#school {
  display: inline-table;
  vertical-align: middle;
  text-align: left;
}
[id] h1 {
  font-size: 60px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
[id] h3 {
  font-size: 40px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
[id] button {
  margin: 2px;
  background-color: #0000ff;
  font-size: 14px;
  font-weight: bold;
  color: white;
}

＆＃13;

<!DOCTYPE html>
<html lang="pt-PT">

<head>
  <meta charset="UTF-8">
  <title>High School</title>
</head>

<body>
  <div id="school"></div>
</body>

</html>

＆＃13;

使用DOM生成HTML页面 - Javascript

1 个答案: