جدول قابل ویرایش در اچ‌تی‌ام‌ال

09 خرداد 1399

غالبا از جداول برای نمایش اطلاعات استفاده می‌کنیم. اما اگر بخواهیم داده‌ها را در همان جدول ویرایش کنیم - به‌طوری‌که متن جدید را با فشردن کلید «اینتر» جایگزین متن فعلی کنیم - راهکار چیست؟ در این مثال اطلاعاتی را که از دیتابیس فراخوانی کرده‌ایم در جدولی نمایش می‌دهیم. سپس با کلیک بر هر یک از سلول‌های جدول، متن دلخواه جدید را به‌کمک Enter ذخیره کرده و یا با Esc از ویرایش انصراف می‌دهیم.

الف) در گام نخست داده ها را از دیتابیس فراخوانی کرده و در جدولی نمایش می دهیم.

ب) در گام دوم خاصیت contenteditable را به هر یک از تگ‌های td می‌افزاییم. لطفا در جدول زیر سعی کنید مقدار هر یک از سلول‌ها را تغییر دهید:

<td contenteditable>Ali</td>

نام	سن
Ali	12
Maryam	8

ج) در قدم بعدی تابعی تعریف می کنیم - مثلا با نام editText - که با رویداد onkeyup فراخوانی شده و بسته به کلیدهای Enter و Esc کاری انجام دهد. این تابع شامل چند پارامتر است:

editText(defaultValue, this, event, idVal, colTitle)

متغیر defaultValue مقدار فعلی سلول است
مقدار this جهت ارجاع دادن به آبجکت استفاده می‌شود
توسط event می توان فهمید چه کلیدی فشرده شده است
متغیر idVal ردیف یونیک جدول را دربر دارد
متغیر colTitle ستونی که باید ویرایش شود

در این روش از ای‌جکس و جی‌کوئری استفاده می‌کنیم و به‌جای mysql داده‌ها را از فایل json خوانده و نتیجه را در همان فایل ذخیره می‌کنیم. index.php فایل اصلی ماست، load.php اطلاعات را از دیتابیس خوانده و در جدولی نمایش می‌دهد و save.php داده جدید را ذخیره می‌کند:

db.json

[{"id":1,"title":"Ali","age":"12"},{"id":2,"title":"Maaryam","age":"10"}]

load.php

<?PHP
$res = "<table border=\"1\">";
$res .= "<thead>";
$res .= "<tr>";
$res .= "<td>نام</td>";
$res .= "<td>سن</td>";
$res .= "</tr>";
$res .= "</thead>";
  
$jsonString = file_get_contents('db.json');
$row = json_decode($jsonString, true);
if($row) {

	for($i=0;$i<count($row);$i++)  {
		$id		= $row[$i]['id'];
		$title	= $row[$i]['title'];
		$age	= $row[$i]['age'];
		
		$res .= "<tr>";
		$res .= "<td contenteditable onkeyup=\"editText('".$title."',this,event,'".$id."','title')\" onblur=\"this.textContent='".$title."'\">".$title."</td>";
		$res .= "<td contenteditable onkeyup=\"editText('".$age."',this,event,'".$id."','age')\" onblur=\"this.textContent='".$age."'\">".$age."</td>";
		$res .= "<tr>";
	}		
}

echo $res;
?>

index.php

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>جدول قابل ویرایش اچ‌تی‌ام‌ال</title>
	<script src="jquery.min.js"></script>
	<script type="text/javascript">
 
		$( document ).ready(function() {
			load_tbl();
		});	
			
		function load_tbl() {
			
			$.ajax({
				type: "POST",
				url: "load.php",
				success: function(res) {
					$("#div_tbl").html(res)
				}			
			});
		}
		
		function editText(defVal,t,e,rowID,col) {
			
			var colVal = $(t).text();
			//Enter
			if (e.which == 13) {
				$.ajax({
					type: "POST",
					data: {
						rowID:rowID,
						colVal:colVal,
						col:col
					},
					url: "save.php",
					success: function(res) {
						load_tbl()
					}			
				});
			}
			//Esc
			else if (e.which == 27) {
				$(t).text(defVal);
			}
		}
	 
	</script>
</head>
<body>
	<div id="div_tbl"></div>
</body>
</html>

save.php

<?PHP
$col 	= $_POST['col'];
$colVal = $_POST['colVal'];
$rowID 	= $_POST['rowID'];

$jsonString = file_get_contents('db.json');
$dataArr 	= json_decode($jsonString, true);

foreach ($dataArr as $key => $entry) {
	if ($entry['id'] == $rowID)
		$dataArr[$key][$col] = $colVal;
}

$jsonString = json_encode($dataArr);
file_put_contents('db.json', $jsonString);
?>

جدول قابل ویرایش در اچ‌تی‌ام‌ال

دیدگاه ها