HTML代码:

<table id="myTable">
  <tr>
    <th>姓名</th>
    <th>邮箱</th>
  </tr>
</table>

<input type="text" id="nameInput">
<input type="text" id="emailInput">
<button onclick="addRow()">添加</button>

JavaScript代码:

function addRow() {
  var name = document.getElementById("nameInput").value;
  var email = document.getElementById("emailInput").value;
  
  var table = document.getElementById("myTable");
  var row = table.insertRow(-1);
  
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  
  cell1.innerHTML = name;
  cell2.innerHTML = email;
}

解释:

首先,我们定义了一个 addRow() 函数,该函数在用户点击“添加”按钮时被调用。在函数中,我们获取了用户输入的姓名和邮箱,然后使用 insertRow() 方法在表格的末尾添加一行。然后,我们使用 insertCell() 方法在新行中插入两个单元格,分别用于显示用户输入的姓名和邮箱。最后,我们将这些值分别设置为单元格的 innerHTML 属性的值,从而实现将用户输入的值追加到表格中的功能

用JavaScript写一段代码要求如下:用户输入姓名和邮箱按下按钮后获取用户的两个值将用户输入的值追加到页面中这张表里。每输入一次就追加一行。

原文地址: http://www.cveoy.top/t/topic/eqnp 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录