Редактирование и обновление таблицы в реальном времени с помощью задачи ajax

Question

У меня есть таблица, которая извлекает данные из базы данных, в каждой строке есть кнопка редактирования.

Когда я нажимаю кнопку «редактировать», она делает эту строку редактируемой, а текст кнопки изменяется с «редактировать».сохранить".

До этого момента я это делал.Теперь я хочу отправить эти отредактированные данные строки в мой update.php файл, используя метод ajax или post, чтобы я мог обновить свою базу данных.

Ниже - мой код:

  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>";
}

Код запроса:

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

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

Вы можете сделать это так.или вы можете просто изменить идентификатор кнопки, если она отредактирована или сохранена, чтобы получить более понятный код, и он разделит два разных действия.тогда просто используйте этот 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 {
      $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
      });

  }

Answer 3

Насколько я понял из вашего вопроса, вы пытаетесь отправить данные по клику, используя ajax, поэтому вы можете сделать что-то вроде этого

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

                     },  
            });

Вы можете отправлять данные, используя ajax, как это