Javascript appendChild（）显示额外的2行_Javascript_Html

Javascript appendChild（）显示额外的2行

javascript html

Javascript appendChild（）显示额外的2行,javascript,html,Javascript,Html,我使用了Javascript appendChild（）方法，但它产生了两个额外的行。如何在单击“提交”时仅显示一行，在执行其他输入时显示另一行下面是我的Javascript代码 <html> <head> <title>Birth Registration</title> <script type="text/javascript"> function regBirth(){ var myArray =[ sFirs

我使用了Javascript appendChild（）方法，但它产生了两个额外的行。如何在单击“提交”时仅显示一行，在执行其他输入时显示另一行

下面是我的Javascript代码

<html>
<head>
<title>Birth Registration</title>
<script type="text/javascript">
function regBirth(){
  var myArray =[
      sFirstName = { },
      sLastName = { },
      dob ={}
    ]
  myArray[0]=document.getElementById('firstname').value;//myArray[0] is for the first item
  document.getElementById('fname').innerHTML = myArray[0];

  myArray[1]=document.getElementById('lastname').value;
  document.getElementById('lname').innerHTML =  myArray[1];//myArray[1] is for the second item

  myArray[2]=document.getElementById('birthDate').value;
  document.getElementById('dob').innerHTML =  myArray[2];//myArray[2] is for the third item

  results = []
  results[0] = myArray.length;
  document.getElementById("count").innerHTML = results[0] -2;

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

        //Second table cell
        myArray[1] = document.createElement('td');
        myArray[1].innerHTML = iteration[0];
        tablerow.appendChild(myArray[1]);

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

        //Table row close
        fragment.appendChild(tablerow);


  }

document.getElementById("details").appendChild(fragment);



}
</script>
</head>

<body>
<h1>Birth Registration</h1>
<hr />
<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" />
 <hr />
<table id="details">
  <tr>
  <th>First NameName</th>
  <th>Last Name</th>
  <th>Date of Birth</th>
  </tr>


</table>

<input type='button' onclick='regBirth()' value='Submit'/>
<h4>Statistics</h1>
<hr />
<h5>Total Count:</h5><p id="count"></p>
</body>
</html>


出生登记
函数regBirth（）{
变量myArray=[
sFirstName={}，
sLastName={}，
dob={}
]
myArray[0]=document.getElementById（'firstname'）。value；//myArray[0]用于第一项
document.getElementById（'fname'）。innerHTML=myArray[0]；
myArray[1]=document.getElementById（'lastname'）。值；
document.getElementById（'lname'）。innerHTML=myArray[1]；//myArray[1]用于第二项
myArray[2]=document.getElementById（'birthDate'）.value；
document.getElementById（'dob'）.innerHTML=myArray[2]；//myArray[2]用于第三项
结果=[]
结果[0]=myArray.length；
document.getElementById（“count”）.innerHTML=results[0]-2；
fragment=document.createDocumentFragment（）；
//表结构变量
变量tablerow、tdFirstName、tdLastName、tdDateOfBirth；
对于（i=0；i而言，问题是数组长度。它将数组长度设为3。因此，会附加两行。
因此，请将长度减少为1。
尝试以下操作：for（i=0；i这是否有家庭作业标记？如果希望表单控件的行为类似于表单，则需要将其放入表单中，并为控件指定一个名称（代替或添加ID）。有什么问题吗？一切正常