javascript - 如何使用jQuery将html表单数据插入到html表格中？

Question

我创建了简单的 html Employee.html，其中包含同一页面中的表格和表单。

input[type=text],
select {
  width: 50%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.split {
  height: 100%;
  width: 50%;
  position: fixed;
  z-index: 1;
  top: 0;
  overflow-x: hidden;
  padding-top: 20px;
}

.left {
  left: 0;
  background-color: #b8c6dd;
}

.right {
  right: 0;
  background-color: #dce0d9;
}

table {
  font-family: Arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="split left">
  <center>
    <h2>Employee Task Record</h2>
  </center>

  <table>
    <tr>
      <th>S.N</th>
      <th>Task</th>
      <th>Description</th>
      <th>Complete</th>
      <th>Type</th>
    </tr>
  </table>
</div>
<div class="split right">
  <center>
    <form id="first_form" method="post" action="">
      Given Task : <input type="text" id="first_name" name="task" value="">
      <br><br> Description: <input type="text" name="description" value=""><br>
      <br> Complete: <input type="radio" name="taskDone" value="yes" checked> Yes
      <input type="radio" name="taskDone" value="no"> No<br> <br> Task Type:
      <select>
        <option value="regular">Regular</option>
        <option value="Meeting">Meeting</option>
        <option value="coding">Coding</option>
        <option value="documentation">Documentation</option>
        <option value="support">Support</option>
      </select> <br> <br>
      <input type="submit" onclick="" value="submit" button class="button">
    </form>
  </center>
</div>

表格布局如下。

现在我想在表单中输入值，当我单击提交按钮时，我希望它们通过像这样使用 jQuery 显示在左表中。我对 jQuery 很陌生，并且使用了 jQuery 选择器的基本命令，例如 $("*"),$("p.intro") 等

Answer 1

input[type=text],
select {
  width: 50%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.split {
  height: 100%;
  width: 50%;
  position: fixed;
  z-index: 1;
  top: 0;
  overflow-x: hidden;
  padding-top: 20px;
}

.left {
  left: 0;
  background-color: #b8c6dd;
}

.right {
  right: 0;
  background-color: #dce0d9;
}

table {
  font-family: Arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>

$('.btn').on('click', function(event) {
    var firstName = $.trim($('#first_name').val());
    var description = $.trim($('#description').val());
    var taskDone = $('input[name=taskDone]:checked').val();
    var taskType = $('#taskType option:selected').val();
    var numRows = $('#tableBody').find('tr').length;
    var newRow = $('<tr><td></td><td></td><td></td><td></td><td></td></tr>');
    var cols = newRow.children();
    cols.eq(0).text(numRows + 1);
    cols.eq(1).text(firstName);
    cols.eq(2).text(description);
    cols.eq(3).text(taskDone);
    cols.eq(4).text(taskType);
    newRow.appendTo('#tableBody');

});

</script>

<div class="split left">
  <center>
    <h2>Employee Task Record</h2>
  </center>

  <table>
    <tr>
      <th>S.N</th>
      <th>Task</th>
      <th>Description</th>
      <th>Complete</th>
      <th>Type</th>
    </tr>
  </table>
</div>
<div class="split right">
  <center>
    <form id="first_form" method="post" action="">
      Given Task : <input type="text" id="first_name" name="task" value="">
      <br><br> Description: <input type="text" name="description" value=""><br>
      <br> Complete: <input type="radio" name="taskDone" value="yes" checked> Yes
      <input type="radio" name="taskDone" value="no"> No<br> <br> Task Type:
      <select>
        <option value="regular">Regular</option>
        <option value="Meeting">Meeting</option>
        <option value="coding">Coding</option>
        <option value="documentation">Documentation</option>
        <option value="support">Support</option>
      </select> <br> <br>
      <input type="submit" onclick="" value="submit" button class="button">
    </form>
  </center>
</div>