Javascript 无法将信息添加到可扩展表

我希望创建一个函数，将信息添加到我的表中，并在此过程中添加一行。我从各种来源收集了下面的大部分代码，这是我最好的尝试。我觉得好像我遗漏了一小段关键的代码。有人能看看他们是否能明白为什么这不起作用-谢谢

表格：

---

您的submit按钮调用的方法不正确，请记住它是JavaScript。也不需要使用

错：

<input type="submit" value="Send" onclick="AddData()"></input>

名称：


电邮地址：


电话号码：


路试日期和时间：


名称
电子邮件
电话号码
申请日期/时间
丹尼·奥沙利文
dannyosullivan1@gmail.com
0858415570
19/07/2019 12:30
罗布·奥基夫
rob@hotmail.com
0812445432
19/08/2019 12:30
丹尼·克劳利
crwley@gmail.com
0858413213
19/07/2019 13:30

请检查答案，如果是您想要的，请告诉我这很好。当我在这个页面上运行代码时，代码是有效的，但在我的web应用程序上没有——我应该在前面提到表单和表在两个单独的html页面上。它应该是同样的工作方式，还是我可以对这段代码进行修改？在这种情况下，您只需更改submit按钮中的“addData”，另一个取决于您如何从服务器渲染。顺便说一句，你可以检查它作为一个答案；）你能详细说明一下我的提交按钮中的addData的更改吗？它实际上是从addData更改为addData，第一个字母是小写的。你们可以在我对第13行的HTML的回复中看到这一点，向上投票真的很有帮助：）我已经向上投票了你们的答案，但不幸的是，我需要15次代表才能让它出现！我快到了，所以当我到达那个位置时，我会回到这里：）谢谢你们的帮助！

<table id="tblAppts" style="width:60%; border: 1px solid black" border="1" 
align="center">

<thead>
<tr>
<th>Name</th>
<th>Email</th> 
<th>Phone Number</th>
<th>Date/Time of Appt</th>
</tr>
</thead>

<tbody>
<tr>
<td>Danny O'Sullivan</td>
<td>dannyosullivan1@gmail.com</td>
<td>0858415570</td>
<td>19/07/2019 12:30</td>
</tr>

  <tr>
<td>Rob O'Keefe</td>
<td>rob@hotmail.com</td>
<td>0812445432</td>
<td>19/08/2019 12:30</td>
</tr>

<tr>
<td>Danny Crowley</td>
<td>crwley@gmail.com</td>
<td>0858413213</td>
<td>19/07/2019 13:30</td>
</tr>

  <tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

</tbody>
</table>
</body>

function addData() {

    var name = document.getElementById("customerName").value;
    var email = document.getElementById("customerEmail").value;
    var phone = document.getElementById("customerPhone").value;
    var date = document.getElementById("customerDate").value;

var tableRef = document.getElementById('tblAppts').getElementsByTagName('tbody')[0];

// Insert a row in the table at the last row
var newRow   = tableRef.insertRow(tableRef.rows.length);

// Insert a cell in the row at index 0
var nameCell  = newRow.insertCell(0);
var emailCell  = newRow.insertCell(1);
var phoneCell  = newRow.insertCell(2);
var dateCell  = newRow.insertCell(3);

nameCell.innerHTML = customerName;
emailCell.innerHTML = customerEmail;
phoneCell.innerHTML = customerPhone;
dateCell.innerHTML = customerDate;

var newText  = document.createTextNode('New row');
newCell.appendChild(newText);

        }

<input type="submit" value="Send" onclick="AddData()"></input>

<input type="submit" value="Send" onclick="addData()">