Question

所以我现在已经有一段时间了，但不知道如何继续。我的代码询问用户的名字，姓氏和年龄为3人，然后将其显示在表格中。

＆＃13;

<script>
  function person(firstName, lastName, age) {

    for (var x = 1; x <= 3; x++) {

      this.firstName = prompt("Please enter a first name", "");
      while (this.firstName == null || this.firstName == "") {
        this.firstName = prompt("Invalid input. Please enter a first name", "");
      }

      this.lastName = prompt("Please enter a last name", "");
      while (this.lastName == null || this.lastName == "") {
        this.lastName = prompt("Invalid input. Please enter a last name", "");
      }

      this.age = prompt("Please enter an age", "");
      this.age = parseInt(this.age);
      while (this.age == null || isNaN(this.age) || this.age < 0) {
        this.age = prompt("Not a valid input. Please enter an age", "");
        this.age = parseInt(this.age);
      }
    }
  }
  
  var personDetail = new person ();
  
  document.writeln("<table>");
	document.writeln(" <tr>");
	document.writeln("  <th>First Name</th>");
	document.writeln("  <th>Last Name</th>");
	document.writeln("  <th>Age</th>");
	document.writeln(" </tr>");
	
	for (var z = 0; z < 5; z++) { 
		document.writeln(" <tr>"); 
		document.writeln("  <td>" + personDetail.firstName + "</td>"); 
		document.writeln("  <td>" + personDetail.lastName + "</td>");
		document.writeln("  <td>" + personDetail.age + "</td>"); 
		document.writeln(" </tr>"); 
	}	
	
	document.writeln("</table>");
  
</script>

＆＃13;

我知道我必须将用户输入收集到一个数组中，但我不知道如何。

我尝试过以下方法。以第一个名字为例：

＆＃13;

  <script>
    function person(firstName[]) {

      for (var x = 1; x <= 3; x++) {
        this.firstName[x - 1] = prompt("Please enter a first name", "");
        while (this.firstName[x - 1] == null || this.firstName[x - 1] == "") {
          this.firstName[x - 1] = prompt("Invalid input. Please enter a first name", "");
        }
      }
    }

    var personDetail = new person();

    for (var z = 0; z < 3; z++) {
      document.writeln(personDetail.firstName[z]);
    }
  </script>

＆＃13;

我知道有更简单的方法可以做到这一点，但我需要使用带有构造函数的对象。

Answer 1

使用数组存储人

jsfiddle.net/0v7k1g7n/

var people = [ new person (),  new person (),  new person () ];

var table = document.getElementById("people");
for(var i = 0; i < people.length; i++){
  table.innerHTML += "<tr><td>" + people[i].firstName + "</td><td>" + people[i].lastName + "</td><td>" + people[i].age + "</td></tr>"
}

或为所有

创建一个对象

jsfiddle.net/0v7k1g7n/1

var People = function(){
  var data = [];
  var table = document.getElementById("people");

  this.addPerson = function(p){
    data.push(p);
    return this;
  }

  this.render = function(){
    for(var i = 0; i < data.length; i++){
      table.innerHTML += "<tr><td>" + data[i].firstName + "</td><td>" + data[i].lastName + "</td><td>" + data[i].age + "</td></tr>"
    }
  }
}

var p = new People();

p.addPerson(new person ()).addPerson(new person ()).addPerson(new person ()).render();

在函数内使用提示输入填充数组

1 个答案: