动态添加文本字段到html表

时间:2016-11-16 06:07:11

标签: javascript php jquery html mysql

$(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?

2 个答案:

答案 0 :(得分:2)

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

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。

答案 1 :(得分:0)

$Tape_Code = $_POST['Tape_Code'];您将获得一系列文本输入,您必须以您想要的形式将其插入数据库。

$Tape_Code = $_POST['Tape_Code']
foreach($Tape_Code as $code){
   echo $code;
}