찾다
백엔드 개발PHP 문제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;
  1. 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);
?>
  1. 편집 가능한 기능 추가

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

먼저 표 셀을 편집 가능하게 만들려면 "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>

  1. 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
PHP 배열의 중복 제거를위한 모범 사례는 무엇입니까?PHP 배열의 중복 제거를위한 모범 사례는 무엇입니까?Mar 03, 2025 pm 04:41 PM

이 기사는 효율적인 PHP 배열 중복 제거를 탐구합니다. Array_unique ()와 같은 내장 기능을 사용자 정의 해시 맵 접근법과 비교하여 배열 크기 및 데이터 유형을 기반으로 성능 트레이드 오프를 강조합니다. 최적의 방법은 profili에 따라 다릅니다

PHP 배열 중복 제거가 키 이름 고유성을 활용할 수 있습니까?PHP 배열 중복 제거가 키 이름 고유성을 활용할 수 있습니까?Mar 03, 2025 pm 04:51 PM

이 기사는 주요 독창성을 사용하여 PHP 배열 중복 제거를 탐구합니다. 직접적인 중복 제거 방법은 아니지만 키 고유성을 활용하면 값을 키에 매핑하여 값을 덮어 복제 한 값으로 고유 한 값을 가진 새 배열을 생성 할 수 있습니다. 이 AP

성능 손실을 위해 PHP 배열 중복 제거를 고려해야합니까?성능 손실을 위해 PHP 배열 중복 제거를 고려해야합니까?Mar 03, 2025 pm 04:47 PM

이 기사는 PHP 배열 중복 제거를 분석하여 순진한 접근법의 성능 병목 현상 (O (n²))를 강조합니다. 사용자 정의 함수, splobjectStorage 및 해시 세트 구현이 포함 된 Array_unique ()를 사용하여 효율적인 대안을 탐색하여 달성합니다.

PHP에서 메시지 대기열 (Rabbitmq, Redis)을 구현하는 방법은 무엇입니까?PHP에서 메시지 대기열 (Rabbitmq, Redis)을 구현하는 방법은 무엇입니까?Mar 10, 2025 pm 06:15 PM

이 기사는 RabbitMQ 및 Redis를 사용하여 PHP에서 메시지 대기열을 구현하는 것을 자세히 설명합니다. 그것은 그들의 아키텍처 (AMQP 대 메모리), 기능 및 신뢰성 메커니즘 (확인, 트랜잭션, 지속성)을 비교합니다. 설계, 오류에 대한 모범 사례

최신 PHP 코딩 표준 및 모범 사례는 무엇입니까?최신 PHP 코딩 표준 및 모범 사례는 무엇입니까?Mar 10, 2025 pm 06:16 PM

이 기사에서는 PSR 권장 사항 (PSR-1, PSR-2, PSR-4, PSR-12)에 중점을 둔 현재 PHP 코딩 표준 및 모범 사례를 검토합니다. 일관된 스타일링, 의미있는 이름 지정 및 EFF를 통해 코드 가독성 및 유지 관리 개선을 강조합니다.

PHP 배열의 중복 제거를위한 최적화 기술은 무엇입니까?PHP 배열의 중복 제거를위한 최적화 기술은 무엇입니까?Mar 03, 2025 pm 04:50 PM

이 기사에서는 대형 데이터 세트에 대한 PHP 배열 중간 복제 최적화를 살펴 봅니다. array_unique (), array_flip (), splobjectStorage 및 Pre-Sorting과 같은 기술을 효율성을 비교합니다. 대규모 데이터 세트의 경우 Chunking, Datab을 제안합니다

PHP 확장 및 PECL로 어떻게 작업합니까?PHP 확장 및 PECL로 어떻게 작업합니까?Mar 10, 2025 pm 06:12 PM

이 기사는 PECL에 중점을 둔 PHP 확장을 설치 및 문제 해결에 대해 자세히 설명합니다. 설치 단계 (찾기, 다운로드/컴파일, 서버 활성화, 다시 시작), 문제 해결 기술 (로그 확인, 설치 확인, 설치 확인,

반사를 사용하여 PHP 코드를 분석하고 조작하는 방법은 무엇입니까?반사를 사용하여 PHP 코드를 분석하고 조작하는 방법은 무엇입니까?Mar 10, 2025 pm 06:12 PM

이 기사는 PHP의 반사 API를 설명하여 런타임 검사 및 클래스, 방법 및 속성의 조작을 가능하게합니다. 일반적인 사용 사례 (문서 생성, ORM, 종속성 주입)에 대해 자세히 설명하고 성능에 대한 경고

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

ZendStudio 13.5.1 맥

ZendStudio 13.5.1 맥

강력한 PHP 통합 개발 환경

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

에디트플러스 중국어 크랙 버전

에디트플러스 중국어 크랙 버전

작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

DVWA

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는

Atom Editor Mac 버전 다운로드

Atom Editor Mac 버전 다운로드

가장 인기 있는 오픈 소스 편집기