繁体   English   中英

使用ajax问题进行实时表编辑和更新

[英]Live table edit and update using ajax problem

我有一个表正在从数据库中检索数据,它的每一行都有编辑按钮。

当我单击“编辑”按钮时,它使该行可编辑,并且按钮的文本从“编辑”更改为“保存”。

到此为止,我已经做到了。 现在,我想使用ajax或post方法将编辑后的行数据发送到我的update.php文件中,以便我可以更新数据库。

贝娄是我的代码:

  while($row = $result->fetch_assoc()) {
  echo "<tr>
    <td>" . $row["Id"]. "</td> 
    <td>" . $row["Receiving"] . "</td> 
    <td>". $row["Date"]. "</td> 
    <td>" . $row["Department"]. "</td>  
    <td>" . $row["D_type"]. "</td> 
    <td>" . $row["Org"]. "</td> 
     <td>" . $row["Org_type"]. "</td> 
  <td>" . $row["File_No"]. "</td> 
  <td>" . $row["Subject"]. "</td> 
  <td>" . $row["File_Name"]. "</td> 
    <td>" . $row["Status"]. "</td> 
  <td> <a class='btn btn-primary' href='MarkReceived.php?id=".$row["Id"]."'>Mark Received</a> </td>
  <td> <a class='btn btn-primary' href='Delete.php?id=".$row["Id"]."'>Delete</a> </td> 
    <td> <button type='button' class = 'editbtn' id=".$row["Id"]." >Edit</button> </td> 
</tr>";
}

jQuery代码:

$('.editbtn').click(function() {
    var $this = $(this);
    var tds = $this.closest('tr').find('td').filter(function() {
        return $(this).find('.editbtn').length === 0;
    });
    if ($this.html() === 'Edit') {
        $this.html('Save');
        tds.prop('contenteditable', true);
    } else {
        $this.html('Edit');
        tds.prop('contenteditable', false);
    }
});

据我从您的问题中了解到的,您正在尝试使用ajax单击保存发送数据,因此您可以执行以下操作

$(".save").click(function(){  
          $.ajax({
              async: true,
                url : "Your URL",
                method : "POST",
                data : {
                     Id: currentlyEditId,
                     Receiving: currentlyEditReceiving,
                     Date:currentlyEditDate // and so on

                     },  
            });

您可以像这样使用ajax发送数据

$('.editbtn').click(function() {
  var $this = $(this);
  var tds = $this.closest('tr').find('td').filter(function() {
      return $(this).find('.editbtn').length === 0;
  });
  if ($this.html() === 'Edit') {
      $this.html('Save');
      tds.prop('contenteditable', true);
  } else {
      $.ajax({
        type: 'POST',
        url: 'update.php',
        data: {//your data}
      }).success(function (data) {
         // request success, do what you want to do here
      }).error(function () {
         // request error
      });
      $this.html('Edit');
      tds.prop('contenteditable', false);
  }
});

您可以这样做。 或者您可以仅更改按钮的ID(如果按钮已被编辑或保存)以使用更简洁的代码,并且它将两个不同的操作分开。 然后就用这个ajax

$('.editbtn').click(function() {
  var $this = $(this);
  var tds = $this.closest('tr').find('td').filter(function() {
      return $(this).find('.editbtn').length === 0;
  });
  if ($this.html() === 'Edit') {
      $this.html('Save');
      tds.prop('contenteditable', true);
  } else {
      $this.html('Updating..');
      $this.attr('disabled', true);
      $.ajax({
        type: 'POST',
        url: 'update.php',
        data: {//your data}
      }).success(function (data) {
        $this.attr('disabled', false);
        $this.html('Edit');
            tds.prop('contenteditable', false);
         // request success, do what you want to do here
      }).error(function () {
         // request error
      });

  }

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM