Question

我创建了一个空数组，也创建了一个全局数组。然后，我用HTML表单中的三个空对象填充空数组。在谷歌浏览器中，它打印出在HTML表单中输入的三个对象，但HTML不会在表格中打印出来。

如何使用getElementById在HTML表格中打印出来 HMTL下面简单的出生登记日期

    <body>
    <h1>Birth Registration</h1>
    <hr />
    <form id ="inputFrom">
    <label>First Name:
      <input type='text' id='firstname'  value='Enter your name Here' />
    </label>
    <label>Last Name:
      <input type='text' id='lastname'   value='Enter your name Here' />
    </label>
     <label for="size_1">D.O.B:</label><input type="date" name="size" id="birthDate" value="dd/mm/yy" />
     <input type='button' onclick='regBirth()' value='Add new person'/>
     </form>
     <hr />
    <table id="details">
      <tr>
      <th>First NameName</th>
      <th>Last Name</th>
      <th>Date of Birth</th>
      </tr>

    </table>
    <h4>Statistics</h1>
    <hr />
    <h5>Total Count:</h5><p id="count"></p>
    </body>
    </html>

JS下面

    var allPeople = [];
    function regBirth(){

        var myArray = [];

      myArray.fname = document.getElementById('firstname').value ;

     myArray.lname =document.getElementById('lastname').value;

    myArray.dob=document.getElementById('birthDate').value;

    console.log(myArray);
      console.log(allPeople);
      var inputForm = document.getElementById("inputFrom").reset();

        tabularForm = document.createDocumentFragment();
        //Table structure variables
        var tablerow;
    for (i=0;i<allPeople.length;i++){
        var iteration = allPeople[i];
            tablerow = document.createElement('tr');
            //first table cell
            myArray.fname  = document.createElement('td');
           myArray.fname .innerHTML = iteration;
            tablerow.appendChild(myArray.fname );

            //Second table cell
            myArray.lname = document.createElement('td');
            myArray.lname.innerHTML = iteration;
            tablerow.appendChild(myArray.lname);

            //Third table cell 
            myArray.dob = document.createElement('td');
            myArray.dob.innerHTML = iteration;
            tablerow.appendChild(myArray.dob);

            //Table row close
             tabularForm .appendChild(tablerow);  
      }

    document.getElementById("details").appendChild( tabularForm ); 
    }

Answer 1

坦率地说，我认为您的代码存在很多问题。我在下面提供了我认为是一个改进的示例，我将其作为评论说明，我希望能帮助您理解您的错误。

function regBirth() {
    // myArray should be instantiated as an object and not as an array
    // because you are assigning object properties to it
    // (and you should change its name ('person' seems appropriate))
    var myArray = {};
    myArray.fname = document.getElementById('firstname').value;
    myArray.lname = document.getElementById('lastname').value;
    myArray.dob = document.getElementById('birthDate').value;

    // you need to add myArray to allPeople
    // if you want allPeople to hold all of your people
    allPeople.push(myArray);

    // use var when you create tabularForm 
    // so that it is not added to global scope 
    var inputForm = document.getElementById("inputFrom").reset();
    var tabularForm = document.createDocumentFragment();
    var tablerow = document.createElement('tr');

    // there is no need to iterate through the allPeople array
    // you just need to append to the dom the latest person (ie., myArray)
    var fname = document.createElement('td');
    // assigning an object (iteration) to innerHTML is wrong 
    // you want to assign the object property, in this case: myArray.fname
    fname.innerHTML = myArray.fname;
    tablerow.appendChild(fname);

    var lname = document.createElement('td');
    lname.innerHTML = myArray.lname;
    tablerow.appendChild(lname);

    var dob = document.createElement('td');
    dob.innerHTML = myArray.dob;
    tablerow.appendChild(dob);

    tabularForm.appendChild(tablerow); 
    document.getElementById("details").appendChild(tabularForm); 
}

Answer 2

只需添加2个正斜杠，一切都应该没问题。

数组中的Javascript对象不打印

2 个答案: