为什么我提交后没有显示我的数据？我没看出有什么不对吗？答案

【问题标题】：Why my data does not appear after I submit? I did not see any wrong there?为什么我提交后没有显示我的数据？我没看出有什么不对吗？
【发布时间】：2021-03-30 06:46:06
【问题描述】：

它应该出现在我的表格中包含我在表单中输入的数据的新行，但提交时它不会出现任何内容。我在那里找不到任何错误。你能帮帮我吗？

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(){    //declare my function to add table
    var tbl = document.getElementById("myTable");
    var r = tbl.insertRow();
    var cell1 = r.insertcell();
    var cell2 = r.insertcell();
    var cell3 = r.insertcell();
    var cell4 = r.insertcell();
    
    cell1.innerHTML = document.getElementById("tid").value;
    cell2.innerHTML = document.getElementById("tusername").value;
    cell3.innerHTML = document.getElementById("toccupation").value;     
   }    
   </script>

</head>
<body>

<form onsubmit="myFunction(); return false;"> //form

 <input type="Number" id="tid" placeholder="ID"/><br/> 
 <input type="text" id="tusername" placeholder="Name"/><br/>
 <input type="text" id="toccupation" placeholder="Occupation"/><br/>

 <input type="submit" value="Add data"/>
 <input type="reset" value="clear"/>
 </form>

 <table id="myTable" border=1>   
 <tr>
 <th>ID</th>
 <th>Name</th>
 <th>Occupation</th>
 </tr>  
 </table><br>

 </body>
 </html>

【问题讨论】：

只是一个小错字； insertCell 中的 C 需要大写。

标签： javascript html forms html-table

【解决方案1】：

插入单元格的方法称为insertCell，而不是insertcellhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLTableRowElement/insertCell

<!DOCTYPE html>
<html>

<head>
  <script>
    function myFunction() { //declare my function to add table
      var tbl = document.getElementById("myTable");
      var r = tbl.insertRow();
      var cell1 = r.insertCell(); // EDITED
      var cell2 = r.insertCell(); // EDITED
      var cell3 = r.insertCell(); // EDITED
      var cell4 = r.insertCell(); // EDITED

      cell1.innerHTML = document.getElementById("tid").value;
      cell2.innerHTML = document.getElementById("tusername").value;
      cell3.innerHTML = document.getElementById("toccupation").value;
    }
  </script>

</head>

<body>

  <form onsubmit="myFunction(); return false;"> //form

    <input type="Number" id="tid" placeholder="ID" /><br/>
    <input type="text" id="tusername" placeholder="Name" /><br/>
    <input type="text" id="toccupation" placeholder="Occupation" /><br/>

    <input type="submit" value="Add data" />
    <input type="reset" value="clear" />
  </form>

  <table id="myTable" border=1>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Occupation</th>
    </tr>
  </table><br>

</body>

</html>

【讨论】：

嘿@cooly-blogy，我的回答对你有帮助吗？