So implementieren Sie bearbeitbare Tabellen mit PHP und Ajax-PHP-Problem-php.cn

So implementieren Sie bearbeitbare Tabellen mit PHP und Ajax

PHPz

Freigeben： 2023-04-21 10:15:16

Original

668 Leute haben es durchsucht

Vorwort

Tabellen sind eine häufig verwendete Methode zum Anzeigen von Daten auf Webseiten. Manchmal müssen wir Benutzern erlauben, Daten über Tabellen zu bearbeiten, daher müssen wir bearbeitbare Tabellen verwenden. Als serverseitige Skriptsprache kann PHP mit Tabellen arbeiten und bei Verwendung mit Ajax Daten asynchron aktualisieren, ohne die gesamte Webseite neu laden zu müssen. In diesem Artikel stellen wir vor, wie man bearbeitbare Tabellen mit PHP und Ajax implementiert.

Implementierungsschritte

Datenbank und Datentabelle erstellen

Erstellen Sie zunächst eine Datenbank mit dem Namen „editable_table“ in der MySQL-Datenbank und erstellen Sie dann eine Datentabelle mit dem Namen „users“, um Benutzerinformationen zu speichern. Die Struktur der Tabelle ist wie folgt:

CREATE TABLE `users` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(50) NOT NULL,
  `email` varchar(50) NOT NULL,
  `phone` varchar(20) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

Nach dem Login kopieren

PHP-Datei erstellen

Erstellen Sie eine PHP-Datei mit dem Namen „table.php“, um Benutzerinformationen aus der Datenbank zu lesen und sie in Form einer Tabelle auf der Webseite anzuzeigen. Der Code lautet wie folgt:

<?php
  // 连接数据库
  $conn = mysqli_connect(&#39;localhost&#39;, &#39;root&#39;, &#39;password&#39;, &#39;editable_table&#39;);
  if (!$conn) {
    die(&#39;连接数据库失败: &#39; . mysqli_connect_error());
  }

  // 查询数据库，获取用户信息
  $sql = "SELECT * FROM users";
  $result = mysqli_query($conn, $sql);

  // 输出表格
  echo "<table><thead><tr><th>ID</th><th>姓名</th><th>邮箱</th><th>电话</th></tr></thead><tbody>";
  while ($row = mysqli_fetch_assoc($result)) {
    echo "<tr><td>" . $row['id'] . "</td><td>" . $row['name'] . "</td><td>" . $row['email'] . "</td><td>" . $row['phone'] . "</td></tr>";
  }
  echo "</tbody></table>";

  // 关闭数据库连接
  mysqli_close($conn);
?>

Nach dem Login kopieren

Bearbeitbare Funktionalität hinzufügen

Jetzt können wir Benutzerinformationen auf der Webseite anzeigen, aber wir möchten, dass Benutzer Daten über das Formular bearbeiten können. Um diese Funktionalität zu erreichen, müssen wir etwas Javascript-Code hinzufügen.

Zuerst müssen wir ein „contenteditable“-Attribut hinzufügen, um Tabellenzellen bearbeitbar zu machen. Darüber hinaus müssen wir einen Ereignis-Listener hinzufügen, um die geänderten Daten an den Server zu senden, wenn der Inhalt der Zelle geändert wird.

Der Code lautet wie folgt:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>可编辑表格</title>
</head>
<body>
  <div id="table-container"></div>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    // 读取数据表并将其展示在网页上
    function loadTable() {
      $.ajax({
        url: 'table.php',
        type: 'GET',
        success: function(result) {
          $('#table-container').html(result);
        }
      });
    }

    // 点击单元格时，将它设为可编辑状态
    $(document).on('click', 'td[contenteditable=false]', function() {
      $(this).attr('contenteditable', true);
      $(this).addClass('editable-cell');
      $(this).focus();
    });

    // 当修改单元格中的内容时，将修改的数据发送到服务器端
    $(document).on('blur', 'td[contenteditable=true]', function() {
      var row = $(this).parent();
      var id = row.children().eq(0).text();
      var name = row.children().eq(1).text();
      var email = row.children().eq(2).text();
      var phone = row.children().eq(3).text();

      $.ajax({
        url: 'update_table.php',
        type: 'POST',
        data: { id: id, name: name, email: email, phone: phone },
        success: function(result) {
          loadTable();
        }
      });

      $(this).attr('contenteditable', false);
      $(this).removeClass('editable-cell');
    });

    // 加载数据表
    $(document).ready(function() {
      loadTable();
    });
  </script>
  <style>
    .editable-cell {
      background-color: #fff2cc;
    }
  </style>
</body>
</html>

Nach dem Login kopieren

Schreiben Sie eine PHP-Datei, um Daten zu aktualisieren

Schließlich müssen wir eine PHP-Datei mit dem Namen „update_table.php“ schreiben, um neue Daten in der Datenbank zu aktualisieren. Der Code lautet wie folgt:

<?php
  // 连接数据库
  $conn = mysqli_connect(&#39;localhost&#39;, &#39;root&#39;, &#39;password&#39;, &#39;editable_table&#39;);
  if (!$conn) {
    die(&#39;连接数据库失败: &#39; . mysqli_connect_error());
  }

  // 获取POST请求中的参数
  $id = $_POST[&#39;id&#39;];
  $name = $_POST[&#39;name&#39;];
  $email = $_POST[&#39;email&#39;];
  $phone = $_POST[&#39;phone&#39;];

  // 更新数据库中的数据
  $sql = "UPDATE users SET name=&#39;$name&#39;, email=&#39;$email&#39;, phone=&#39;$phone&#39; WHERE id=&#39;$id&#39;";
  $result = mysqli_query($conn, $sql);

  // 输出结果
  if ($result) {
    echo "修改成功";
  } else {
    echo "修改失败";
  }

  // 关闭数据库连接
  mysqli_close($conn);
?>

Nach dem Login kopieren

Zu diesem Zeitpunkt haben wir alle Schritte zum Implementieren bearbeitbarer Tabellen mit PHP und Ajax abgeschlossen. Wenn wir die Webseite aktualisieren, können wir die zugehörigen Funktionen bearbeitbarer Tabellen realisieren.

Zusammenfassung

In diesem Artikel haben wir vorgestellt, wie man bearbeitbare Tabellen mit PHP und Ajax implementiert. Durch die Verwendung des „contenteditable“-Attributs und der Ereignis-Listener können wir Tabellenzellen bearbeitbar machen und die geänderten Daten zur Aktualisierung über Ajax auf den Server hochladen. Auf diese Weise können Benutzer Daten einfach über die Webseite bearbeiten und speichern.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie bearbeitbare Tabellen mit PHP und Ajax. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!