PHP와 Ajax로 편집 가능한 테이블을 구현하는 방법

머리말

테이블은 웹 페이지에서 데이터를 표시하는 데 일반적으로 사용되는 방법이며 때로는 사용자가 테이블을 통해 데이터를 편집할 수 있도록 허용해야 하므로 편집 가능한 테이블을 사용해야 합니다. 서버 측 스크립팅 언어인 PHP는 테이블에서 작동할 수 있으며, Ajax와 함께 사용하면 전체 웹 페이지를 다시 로드하지 않고도 비동기적으로 데이터를 업데이트할 수 있습니다. 이번 글에서는 php와 ajax를 이용하여 편집 가능한 테이블을 구현하는 방법을 소개하겠습니다.

구현 단계

1. 데이터베이스 및 데이터 테이블 생성

먼저 mysql 데이터베이스에 "editable_table"이라는 이름의 데이터베이스를 생성한 후, 사용자 정보를 저장할 "users"라는 데이터 테이블을 생성합니다. 테이블의 구조는 다음과 같습니다.

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. php 파일 생성

데이터베이스에서 사용자 정보를 읽어 웹 페이지에 테이블 형태로 표시하기 위해 "table.php"라는 이름의 PHP 파일을 생성합니다. 코드는 다음과 같습니다.

<?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. 편집 가능한 기능 추가

이제 웹 페이지에 사용자 정보를 표시할 수 있지만 사용자가 양식을 통해 데이터를 편집할 수 있기를 원합니다. 이 기능을 구현하려면 일부 자바스크립트 코드를 추가해야 합니다.

먼저 표 셀을 편집 가능하게 만들려면 "contenteditable" 속성을 추가해야 합니다. 또한 셀의 내용이 수정될 때 수정된 데이터를 서버로 보내려면 이벤트 리스너도 추가해야 합니다.

코드는 다음과 같습니다:

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. PHP 파일을 작성하여 데이터 업데이트

마지막으로 "update_table.php"라는 PHP 파일을 작성하여 새 데이터를 데이터베이스에 업데이트해야 합니다. 코드는 다음과 같습니다.

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

이제 php와 ajax를 사용하여 편집 가능한 테이블을 구현하는 모든 단계를 완료했습니다. 웹 페이지를 새로 고치면 편집 가능한 테이블의 관련 기능을 구현할 수 있습니다.

요약

이번 글에서는 php와 ajax를 이용하여 편집 가능한 테이블을 구현하는 방법을 소개했습니다. "contenteditable" 속성과 이벤트 리스너를 사용하면 테이블 셀을 편집 가능하게 만들고 수정된 데이터를 ajax를 통해 업데이트하기 위해 서버에 업로드할 수 있습니다. 이러한 방식으로 사용자는 웹페이지를 통해 쉽게 데이터를 편집하고 저장할 수 있습니다.

위 내용은 PHP와 Ajax로 편집 가능한 테이블을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!