Bagaimana untuk melaksanakan jadual boleh diedit dengan php dan ajax-masalah PHP-php.cn

Bagaimana untuk melaksanakan jadual boleh diedit dengan php dan ajax

PHPz

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

asal

742 orang telah melayarinya

Kata Pengantar

Jadual ialah cara yang biasa digunakan untuk memaparkan data pada halaman web, dan kadangkala kita perlu membenarkan pengguna mengedit data melalui jadual, jadi kita perlu menggunakan jadual boleh diedit. Sebagai bahasa skrip sebelah pelayan, php boleh beroperasi pada jadual, dan apabila digunakan dengan ajax, ia boleh mengemas kini data secara tidak segerak tanpa memuatkan semula keseluruhan halaman web. Dalam artikel ini, kami akan memperkenalkan cara melaksanakan jadual boleh diedit menggunakan php dan ajax.

Langkah pelaksanaan

Buat pangkalan data dan jadual data

Mula-mula, buat pangkalan data bernama "editable_table" dalam pangkalan data mysql, dan kemudian buat A jadual data bernama "pengguna" digunakan untuk menyimpan maklumat pengguna. Struktur jadual adalah seperti berikut:

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;

Salin selepas log masuk

Buat fail php

Buat fail php bernama "table.php" untuk membaca pengguna daripada maklumat pangkalan data dan memaparkannya dalam bentuk jadual di halaman web. Kodnya adalah seperti berikut:

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

Salin selepas log masuk

Tambah fungsi boleh edit

Kini kami boleh memaparkan maklumat pengguna pada halaman web, tetapi kami mahu pengguna boleh mengedit data melalui borang. Untuk mencapai fungsi ini, kita perlu menambah beberapa kod javascript.

Pertama, kita perlu menambah atribut "boleh diedit" untuk menjadikan sel jadual boleh diedit. Selain itu, kami juga perlu menambah pendengar acara untuk menghantar data yang diubah suai ke pelayan apabila kandungan dalam sel diubah suai.

Kodnya adalah seperti berikut:

<!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>

Salin selepas log masuk

Tulis fail php untuk mengemas kini data

Akhir sekali, kita perlu menulis fail bernama Fail php "update_table.php", digunakan untuk mengemas kini data baharu ke dalam pangkalan data. Kodnya adalah seperti berikut:

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

Salin selepas log masuk

Pada ketika ini, kami telah menyelesaikan semua langkah untuk melaksanakan jadual boleh diedit dengan php dan ajax Apabila kami menyegarkan halaman web, kami boleh merealisasikan fungsi jadual boleh edit yang berkaitan .

Ringkasan

Dalam artikel ini, kami memperkenalkan cara menggunakan php dan ajax untuk melaksanakan jadual boleh diedit. Dengan menggunakan atribut "contenteditable" dan pendengar acara, kami boleh menjadikan sel jadual boleh diedit dan memuat naik data yang diubah suai ke pelayan untuk kemas kini melalui ajax. Dengan cara ini, pengguna boleh mengedit dan menyimpan data dengan mudah melalui halaman web.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan jadual boleh diedit dengan php dan ajax. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!