第二种形式的数据如何发送到table？

Question

我想将不止一种形式的数据发送到table。我需要帮助。我的主要目标是：我想从 table 中选择包含 SQL 的数据库数据。使用屏幕上 table 的行数据 ajax 创建一个新的 table

语法错误。

$(document).ready(function() {
  var id = 1;
  $("#butsend,#butsend2").click(function() {
    var newid = id++;
    $("#table1").append('<tr valign="top" id="' + newid + '">\n\
<td width="100px" >' + newid + '</td>\n\
<td width="100px" class="name' + newid + '">' + $("#name").val() + '</td>\n\
<td width="100px" class="sname' + newid + '">' + $("#sname").val() + '</td>\n\ </tr>');
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div style="margin: auto;width: 60%;">
  <form id="form1" name="form1" method="post">
    <div class="form-group">
      Name:
      <input type="text" name="name" class="form-control" id="name">
    </div>
    <div class="form-group">
      Surname:
      <input type="text" name="sname" class="form-control" id="sname">
    </div>
    <input type="button" name="send" class="btn btn-primary" value="add data" id="butsend">
  </form>

  <form id="form2" name="form2" method="post">
    <div class="form-group">
      Name2:
      <input type="text" name="name2" class="form-control" id="name2">
    </div>
    <div class="form-group">
      Surname2:
      <input type="text" name="sname2" class="form-control" id="sname2">
    </div>
    <input type="button" name="send2" class="btn btn-primary" value="add data2" id="butsend2">
  </form>


  <table id="table1" name="table1" class="table table-bordered">
    <tbody>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Surname</th>
        <tr>
    </tbody>
  </table>

jsfiddle.net

Answer 1

在两种形式中为输入字段提供相同的类。然后就可以得到按钮的当前形式，并找到合适的输入。

$(document).ready(function() {
  var id = 1;
  $("#butsend,#butsend2").click(function() {
    var newid = id++;
    let form = $(this).closest("form");
    let name = form.find(".name").val();
    let sname = form.find(".sname").val();
    $("#table1").append('<tr valign="top" id="' + newid + '">\n\
<td width="100px" >' + newid + '</td>\n\
<td width="100px" class="name' + newid + '">' + name + '</td>\n\
<td width="100px" class="sname' + newid + '">' + sname + '</td>\n\ </tr>');
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div style="margin: auto;width: 60%;">
  <form id="form1" name="form1" method="post">
    <div class="form-group">
      Name:
      <input type="text" name="name" class="form-control name" id="name">
    </div>
    <div class="form-group">
      Surname:
      <input type="text" name="sname" class="form-control sname" id="sname">
    </div>
    <input type="button" name="send" class="btn btn-primary" value="add data" id="butsend">
  </form>

  <form id="form2" name="form2" method="post">
    <div class="form-group">
      Name2:
      <input type="text" name="name2" class="form-control name" id="name2">
    </div>
    <div class="form-group">
      Surname2:
      <input type="text" name="sname2" class="form-control sname" id="sname2">
    </div>
    <input type="button" name="send2" class="btn btn-primary" value="add data2" id="butsend2">
  </form>


  <table id="table1" name="table1" class="table table-bordered">
    <tbody>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Surname</th>
        <tr>
    </tbody>
  </table>
</div>

第二种形式的数据如何发送到table？

How is the data in the second form sent to the table?

php

jquery

post

append