Question

我正在寻找一个将信息添加到表中并在过程中添加一行的函数。我已经从各种渠道收集了下面的大多数代码，这是我的最佳尝试。我感觉好像正在丢失一小段但至关重要的代码。有人可以请他们看看是否能解决这个问题吗-谢谢。

表格：

            <label>Name: </label><input id="customerName" class ="form- 
        control" type="text" name="Name of Customer" required></input>
        </br>

        <label>Email Address: </label><input id="customerEmail" class 
         ="form-control" type="email" name="Email Address" required></input>
        </br>

        <label>Phone no.: </label><input id="customerPhone" class ="form- 
        control" type="number" name="Phone No." required></input>
        </br>

        <label>Date & Time of Test Drive: </label><input 
         id="customerDate" class ="form-control" type="datetime-local" 
         name="Date & Time of Test Drive" required></input>
        </br>

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

表格：

<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>

Javascript：

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

        }

Answer 1

您的“提交”按钮正在调用错误的方法，请记住，JavaScript是Case Sensitive。同样也不需要</input>

错误：

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

右：

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

我已对您的代码进行了一些修复：customerName，customerEmail，customerPhone，customerDate是未定义的。我改用了您已经定义的变量name，email，phone和date。

方法newCell也不存在。

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 = name;
    emailCell.innerHTML = email;
    phoneCell.innerHTML = phone;
    dateCell.innerHTML = date;

    var newText  = document.createTextNode('New row');
}

<label>Name: </label><input id="customerName" class ="form-control" type="text" name="Name of Customer" required></input>

</br>
<label>Email Address: </label><input id="customerEmail" class="form-control" type="email" name="Email Address" required></input>
</br>

<label>Phone no.: </label><input id="customerPhone" class ="form-control" type="number" name="Phone No." required></input>
</br>

<label>Date & Time of Test Drive: </label><input id="customerDate" class ="form-control" type="datetime-local" name="Date & Time of Test Drive" required></input>
</br>

<input type="submit" value="Send" onclick="addData()">
		
<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>

无法将信息添加到可伸缩表

1 个答案: