Question

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

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

到此为止，我已经做到了。现在，我想使用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);
    }
});

Answer 1

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

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

                     },  
            });

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

Answer 2

$('.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

Answer 3

$('.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
      });

  }

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

3 个答案: