JavaScript对象不打印

我已经创建了一个空数组，也是一个全球性阵列。然后使用HTML表单中的三个空对象填充空数组。在谷歌浏览器中，它打印出HTML表单中输入的三个对象，但HTML不会将其打印在表格中。JavaScript对象不打印

如何使用的getElementById 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); 
    }

来源

2014-03-13 IslandKing

坦率地说，我觉得有很多你的代码错误。我在下面提供了我认为是一个改进的示例，并且我将包括作为注释说明，希望能够帮助您理解错误。

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); 
}

来源

2014-03-14 01:07:39 76484

谢谢76484..That是辉煌..是否有可能使用for循环输出数组长度？ – IslandKing

没有必要使用for循环。 'length'是Array对象的一个属性。你可以像这样得到它：allPeople.length – 76484

我打印出来的HTML表格只需添加一个2 FOWARD - 一切都应该没问题。

来源

2014-03-14 00:47:22 elipesso

JavaScript对象不打印

回答

相关问题