Comment implémenter des tables modifiables avec php et ajax

Avant-propos

Les tableaux sont un moyen couramment utilisé pour afficher des données sur des pages Web, et parfois nous devons permettre aux utilisateurs de modifier les données via des tableaux, nous devons donc utiliser des tableaux modifiables. En tant que langage de script côté serveur, PHP peut fonctionner sur des tables et, lorsqu'il est utilisé avec Ajax, il peut mettre à jour les données de manière asynchrone sans recharger la page Web entière. Dans cet article, nous présenterons comment implémenter des tables modifiables en utilisant php et ajax.

Étapes de mise en œuvre

1. Créer une base de données et une table de données

Tout d'abord, créez une base de données nommée "editable_table" dans la base de données mysql, puis créez une table de données nommée "users" pour stocker les informations utilisateur. La structure du tableau est la suivante :

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;

2. Créer un fichier php

Créez un fichier php nommé "table.php" pour lire les informations utilisateur de la base de données et les afficher sur la page web sous forme de tableau. Le code est le suivant :

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

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

3. Ajouter une fonctionnalité modifiable

Nous pouvons désormais afficher les informations utilisateur sur la page Web, mais nous voulons que les utilisateurs puissent modifier les données via le formulaire. Afin d'obtenir cette fonctionnalité, nous devons ajouter du code javascript.

Tout d'abord, nous devons ajouter un attribut "contenteditable" pour rendre les cellules du tableau modifiables. De plus, nous devons également ajouter un écouteur d'événements pour envoyer les données modifiées au serveur lorsque le contenu de la cellule est modifié.

Le code est le suivant :

nbsp;html>


  <meta>
  <title>可编辑表格</title>


  <div></div>
  <script></script>
  <script>
    // 读取数据表并将其展示在网页上
    function loadTable() {
      $.ajax({
        url: &#39;table.php&#39;,
        type: &#39;GET&#39;,
        success: function(result) {
          $(&#39;#table-container&#39;).html(result);
        }
      });
    }

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

    // 当修改单元格中的内容时，将修改的数据发送到服务器端
    $(document).on(&#39;blur&#39;, &#39;td[contenteditable=true]&#39;, 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: &#39;update_table.php&#39;,
        type: &#39;POST&#39;,
        data: { id: id, name: name, email: email, phone: phone },
        success: function(result) {
          loadTable();
        }
      });

      $(this).attr(&#39;contenteditable&#39;, false);
      $(this).removeClass(&#39;editable-cell&#39;);
    });

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

4. Écrivez un fichier php pour mettre à jour les données

Enfin, nous devons écrire un fichier php nommé "update_table.php" pour mettre à jour les nouvelles données dans la base de données. Le code est le suivant :

<?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);
?>

À ce stade, nous avons terminé toutes les étapes pour implémenter les tables modifiables avec php et ajax. Lorsque nous actualisons la page Web, nous pouvons réaliser les fonctions associées aux tables modifiables.

Résumé

Dans cet article, nous avons présenté comment implémenter des tables modifiables en utilisant php et ajax. En utilisant l'attribut "contenteditable" et les écouteurs d'événements, nous pouvons rendre les cellules du tableau modifiables et télécharger les données modifiées sur le serveur pour les mises à jour via ajax. De cette manière, les utilisateurs peuvent facilement modifier et enregistrer des données via la page Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!