PHP와 Ajax로 편집 가능한 테이블을 구현하는 방법
머리말
테이블은 웹 페이지에서 데이터를 표시하는 데 일반적으로 사용되는 방법이며 때로는 사용자가 테이블을 통해 데이터를 편집할 수 있도록 허용해야 하므로 편집 가능한 테이블을 사용해야 합니다. 서버 측 스크립팅 언어인 PHP는 테이블에서 작동할 수 있으며, Ajax와 함께 사용하면 전체 웹 페이지를 다시 로드하지 않고도 비동기적으로 데이터를 업데이트할 수 있습니다. 이번 글에서는 php와 ajax를 이용하여 편집 가능한 테이블을 구현하는 방법을 소개하겠습니다.
구현 단계
- 데이터베이스 및 데이터 테이블 생성
먼저 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;
- php 파일 생성
데이터베이스에서 사용자 정보를 읽어 웹 페이지에 테이블 형태로 표시하기 위해 "table.php"라는 이름의 PHP 파일을 생성합니다. 코드는 다음과 같습니다.
<?php
// 连接数据库
$conn = mysqli_connect('localhost', 'root', 'password', 'editable_table');
if (!$conn) {
die('连接数据库失败: ' . 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);
?>- 편집 가능한 기능 추가
이제 웹 페이지에 사용자 정보를 표시할 수 있지만 사용자가 양식을 통해 데이터를 편집할 수 있기를 원합니다. 이 기능을 구현하려면 일부 자바스크립트 코드를 추가해야 합니다.
먼저 표 셀을 편집 가능하게 만들려면 "contenteditable" 속성을 추가해야 합니다. 또한 셀의 내용이 수정될 때 수정된 데이터를 서버로 보내려면 이벤트 리스너도 추가해야 합니다.
코드는 다음과 같습니다:
<!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>- PHP 파일을 작성하여 데이터 업데이트
마지막으로 "update_table.php"라는 PHP 파일을 작성하여 새 데이터를 데이터베이스에 업데이트해야 합니다. 코드는 다음과 같습니다.
<?php
// 连接数据库
$conn = mysqli_connect('localhost', 'root', 'password', 'editable_table');
if (!$conn) {
die('连接数据库失败: ' . mysqli_connect_error());
}
// 获取POST请求中的参数
$id = $_POST['id'];
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
// 更新数据库中的数据
$sql = "UPDATE users SET name='$name', email='$email', phone='$phone' WHERE id='$id'";
$result = mysqli_query($conn, $sql);
// 输出结果
if ($result) {
echo "修改成功";
} else {
echo "修改失败";
}
// 关闭数据库连接
mysqli_close($conn);
?>이제 php와 ajax를 사용하여 편집 가능한 테이블을 구현하는 모든 단계를 완료했습니다. 웹 페이지를 새로 고치면 편집 가능한 테이블의 관련 기능을 구현할 수 있습니다.
요약
이번 글에서는 php와 ajax를 이용하여 편집 가능한 테이블을 구현하는 방법을 소개했습니다. "contenteditable" 속성과 이벤트 리스너를 사용하면 테이블 셀을 편집 가능하게 만들고 수정된 데이터를 ajax를 통해 업데이트하기 위해 서버에 업로드할 수 있습니다. 이러한 방식으로 사용자는 웹페이지를 통해 쉽게 데이터를 편집하고 저장할 수 있습니다.
위 내용은 PHP와 Ajax로 편집 가능한 테이블을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7326
9
1625
14
1350
46
1262
25
1209
29
PHP 배열의 중복 제거를위한 모범 사례는 무엇입니까?
Mar 03, 2025 pm 04:41 PM
이 기사는 효율적인 PHP 배열 중복 제거를 탐구합니다. Array_unique ()와 같은 내장 기능을 사용자 정의 해시 맵 접근법과 비교하여 배열 크기 및 데이터 유형을 기반으로 성능 트레이드 오프를 강조합니다. 최적의 방법은 profili에 따라 다릅니다
PHP 배열 중복 제거가 키 이름 고유성을 활용할 수 있습니까?
Mar 03, 2025 pm 04:51 PM
이 기사는 주요 독창성을 사용하여 PHP 배열 중복 제거를 탐구합니다. 직접적인 중복 제거 방법은 아니지만 키 고유성을 활용하면 값을 키에 매핑하여 값을 덮어 복제 한 값으로 고유 한 값을 가진 새 배열을 생성 할 수 있습니다. 이 AP
성능 손실을 위해 PHP 배열 중복 제거를 고려해야합니까?
Mar 03, 2025 pm 04:47 PM
이 기사는 PHP 배열 중복 제거를 분석하여 순진한 접근법의 성능 병목 현상 (O (n²))를 강조합니다. 사용자 정의 함수, splobjectStorage 및 해시 세트 구현이 포함 된 Array_unique ()를 사용하여 효율적인 대안을 탐색하여 달성합니다.
PHP에서 메시지 대기열 (Rabbitmq, Redis)을 구현하는 방법은 무엇입니까?
Mar 10, 2025 pm 06:15 PM
이 기사는 RabbitMQ 및 Redis를 사용하여 PHP에서 메시지 대기열을 구현하는 것을 자세히 설명합니다. 그것은 그들의 아키텍처 (AMQP 대 메모리), 기능 및 신뢰성 메커니즘 (확인, 트랜잭션, 지속성)을 비교합니다. 설계, 오류에 대한 모범 사례
최신 PHP 코딩 표준 및 모범 사례는 무엇입니까?
Mar 10, 2025 pm 06:16 PM
이 기사에서는 PSR 권장 사항 (PSR-1, PSR-2, PSR-4, PSR-12)에 중점을 둔 현재 PHP 코딩 표준 및 모범 사례를 검토합니다. 일관된 스타일링, 의미있는 이름 지정 및 EFF를 통해 코드 가독성 및 유지 관리 개선을 강조합니다.
PHP 배열의 중복 제거를위한 최적화 기술은 무엇입니까?
Mar 03, 2025 pm 04:50 PM
이 기사에서는 대형 데이터 세트에 대한 PHP 배열 중간 복제 최적화를 살펴 봅니다. array_unique (), array_flip (), splobjectStorage 및 Pre-Sorting과 같은 기술을 효율성을 비교합니다. 대규모 데이터 세트의 경우 Chunking, Datab을 제안합니다
PHP 확장 및 PECL로 어떻게 작업합니까?
Mar 10, 2025 pm 06:12 PM
이 기사는 PECL에 중점을 둔 PHP 확장을 설치 및 문제 해결에 대해 자세히 설명합니다. 설치 단계 (찾기, 다운로드/컴파일, 서버 활성화, 다시 시작), 문제 해결 기술 (로그 확인, 설치 확인, 설치 확인,
반사를 사용하여 PHP 코드를 분석하고 조작하는 방법은 무엇입니까?
Mar 10, 2025 pm 06:12 PM
이 기사는 PHP의 반사 API를 설명하여 런타임 검사 및 클래스, 방법 및 속성의 조작을 가능하게합니다. 일반적인 사용 사례 (문서 생성, ORM, 종속성 주입)에 대해 자세히 설명하고 성능에 대한 경고
