第二种形式的数据是如何发送到表中的？

Posted 2023-05-08

【中文标题】第二种形式的数据是如何发送到表中的？

【英文标题】：How is the data in the second form sent to the table?

【发布时间】：2021-07-27 04:33:10

【问题描述】：

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

抱歉语法错误。

$(document).ready(function() 
  var id = 1;
  $("#butsend,#butsend2").click(function() 
    var newid = id++;
    $("#table1").append('<tr valign="top" id="' + newid + '">\n\
<td  >' + newid + '</td>\n\
<td  class="name' + newid + '">' + $("#name").val() + '</td>\n\
<td  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

【问题讨论】：

为什么需要两个相同的表格？

我将产品库存列为表格。表格中的每一行都是一个表格。我将从列表中选择我选择的产品并创建一个新表。

【参考方案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  >' + newid + '</td>\n\
<td  class="name' + newid + '">' + name + '</td>\n\
<td  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>