javascript - 将文本字段动态添加到 html 表中

Question

$(document).ready(function() {
  var maxField = 10;
  var addButton = $('.add_button');
  var wrapper = $('.field_wrapper');
  var fieldHTML = '<div><input type="text" name="Tape_Code[]" value=""/><a href="javascript:void(0);" class="remove_button" title="Remove field">delete</a></div>';
  var x = 1;
  $(addButton).click(function() {
    if (x < maxField) {
      x++;
      $(wrapper).append(fieldHTML);
    }
  });
  $(wrapper).on('click', '.remove_button', function(e) {
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
  });
});

<?php
  include_once 'dpconnect.php';
  $que=mysqli_query($MySQLiconn,"select Backup_Name from admin_backup_list ");
  if(isset($_POST['confirm'])) {
     $Date=date('d/m/y');
     $Backup_Name=$_POST['Backup_Name'];
     $Tape_Code = $_POST['Tape_Code'];
     $Operator_Approval = $_POST['Operator_Approval'];
     $Operator_Remark = $_POST['Operator_Remark'];

     $abc=mysqli_query($MySQLiconn,"insert into backup_details(Date, Backup_Name, Tape_Code,Operator_Approval,Operator_Remark)values('$Backup_Name','$Tape_Code','$Operator_Approval','$Operator_Remark')");
   }

?>


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<?php $Date=date( 'd/m/y'); ?>


<form name="form2" action="" method="post">
  <table>
    <tr>
      <td width="103">Date</td>
      <td width="94">Backup_Name</td>
      <td width="94">No Of Tapes</td>
      <td width="53">Tape Code</td>
      <td width="71">Operator Approval</td>
      <td width="144">Operator Remark</td>

    </tr>
    <?php if ($que->num_rows > 0) { while ($row = mysqli_fetch_array($que)) { ?>
    <tr>
      <td>
        <?php echo $Date; ?>
      </td>
      <td>
        <?php echo $row[ 'Backup_Name']; ?>
      </td>
      <td>
        <input type="text" name="No_Of_Backup">
      </td>
      <td>
        <div class="field_wrapper">
          <input type="text" name="Tape_Code" value="" /><a href="javascript:void(0);" class="add_button" title="Add field">add</a>
        </div>
      </td>
      <td>
        <input type="text" name="Operator_Approval">
      </td>
      <td>
        <input type="text" name="Operator_Remark">
      </td>
      <td colspan="8">
        <input type="submit" name="confirm" value="Confirm">
        </center>
      </td>
    </tr>
    <?php } } ?>

  </table>
</form>
</body>

</html>

我正在用 php 编写这段代码。我需要帮助将文本字段动态添加到表的特定列中。我也使用 JavaScript 完成了代码。但问题是当我在一行中添加字段时，所有行都在更新额外的字段。我需要帮助。如何将这些数据插入 MySQL？

Answer 1

您的代码存在的问题是您使用类选择器来选择元素。类选择器返回具有该类的所有元素的类似对象的数组。

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

如果您更改类似于下面的代码，您可以找出点击了哪个元素。

<a href="javascript:void(0);" class="add_button" title="Add field" onclick="addButton(event);">add</a>

在脚本中

      function addButton(ev) {
        var clickedElement = console.log(ev.target);
      }

现在您有了用户点击的元素，您可以找到父 td/tr 并为文本框附加 html。