javascript - 在html中自动将元素添加到表中

Question

我在表单中有三个输入列表和一个提交按钮。 表格下面也有一张 table 。 我希望当我单击提交按钮时，无需重新加载页面即可在表格中查看我的输入值。

<input name="Choose1">
<input name="Choose2">
<input name="Choose3">
<input type="submit" value"Add">

<table>
<tr>
<th>Field 1</th>
<th>Field 2</th>
<th>Field 3</th>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
</tr>
</table>

很明显第一个表应该是空的。 add 我应该多次添加一个元素

Answer 1

使用jquery

$("#addRow").on('click', function(){
  const html = "<tr><td>"+$('#td1').val()+"</td><td>"+$('#td2').val()+"</td><td>"+$('#td3').val()+"</td></tr>";
  $('#bodyTable').append(html)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="Choose1" id="td1">
<input name="Choose2" id="td2">
<input name="Choose3" id="td3">
<button id="addRow" >Add </button>

<table>
  <thead>
  <tr>
    <th>Field 1</th>
    <th>Field 2</th>
    <th>Field 3</th>
  </tr>
  </thead>
  <tbody id="bodyTable">
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
    <td>Value 3</td>
  </tr>
  </tbody>
</table>