لفتح صندوق جديد عند النقر على رابط داخل جدول البيانات المستخرجة من قاعدة البيانات MySQL وعرض معلومات مفصلة فيه، يمكنك استخدام تقنية الجافا سكريبت (JavaScript) بالإضافة إلى تقنيات HTML وCSS لتنسيق الصندوق الجديد.
أولاً، قم بتعريف الرابط داخل كل صف في الجدول الخاص بك. يمكنك استخدام عنصر لإنشاء الرابط وتعيين الهدف (href) إلى # مع إضافة class أو id لكل رابط لاستهدافه بواسطة الجافا سكريبت لاحقاً.
ثم، استخدم جافا سكريبت للتقاط حدث النقر على هذه الروابط وفتح صندوق جديد. يمكنك استخدام الدوال addEventListener للاستماع إلى حدث النقر على الروابط وتنفيذ الإجراءات المناسبة.
في داخل دالة التعامل مع الحدث (event handler)، يمكنك إنشاء صندوق جديد (على سبيل المثال، باستخدام عنصر
يمكنك استخدام CSS لتنسيق الصندوق الجديد وجعله يظهر بشكل جميل ومرتب.
إليك مثالًا بسيطًا على كيفية تنفيذ هذا المفهوم:
HTML:
html<table>
<tr>
<td><a href="#" class="details-link" data-id="1">Show Detailsa>td>
<td>Data 1td>
<td>Data 2td>
tr>
table>
<div id="details-box" style="display: none;">
div>
JavaScript:
javascriptdocument.addEventListener("DOMContentLoaded", function() {
var links = document.querySelectorAll(".details-link");
links.forEach(function(link) {
link.addEventListener("click", function(event) {
event.preventDefault();
var id = this.getAttribute("data-id");
showDetails(id);
});
});
});
function showDetails(id) {
// يمكنك استخدام AJAX لاسترجاع المعلومات المفصلة بناءً على الـ ID
// هنا نستخدم نص بسيط فقط للتوضيح
var details = "Detailed information for ID " + id;
var detailsBox = document.getElementById("details-box");
detailsBox.textContent = details;
detailsBox.style.display = "block";
}
CSS:
css#details-box {
width: 300px;
height: 200px;
background-color: #f0f0f0;
border: 1px solid #ccc;
padding: 10px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
}
يرجى ملاحظة أن هذا المثال يستخدم نمطًا بسيطًا لعرض المعلومات المفصلة، يمكنك تطويره بما يناسب احتياجات مشروعك بمزيد من التفاصيل والتعقيد.
المزيد من المعلومات
بالطبع، هيا نواصل تطوير المقال للمساعدة في فهم أكبر لكيفية فتح صندوق جديد عند النقر على رابط داخل جدول البيانات وعرض المعلومات بشكل مفصل.
الآن، بعد أن قمنا بتحديد العناصر في HTML وكتابة السكربت الأساسي في JavaScript، يمكننا أن نقوم بتحسين وتنسيق العرض باستخدام CSS، وكذلك توسيع السكربت لاستخدام AJAX لاسترجاع المعلومات المفصلة من الخادم.
لنبدأ بتحسين العرض باستخدام CSS:
CSS:
css#details-box {
width: 400px;
max-width: 80%;
height: auto;
max-height: 80%;
background-color: #fff;
border: 1px solid #ccc;
padding: 20px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
overflow-y: auto; /* إضافة شريط التمرير العمودي إذا كانت المحتويات تتجاوز الارتفاع */
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* إضافة ظل للصندوق */
}
.details-content {
/* أسلوب تنسيق المحتوى المفصل */
}
تم تعديل الستايل ليجعل الصندوق يظهر بشكل أفضل وأكثر جاذبية. كما تمت إضافة قاعدة overflow-y: auto; لإظهار شريط تمرير عند الضرورة عندما تكون المحتويات أطول من الصندوق.
الآن، دعونا نقوم بتحسين السكربت لاستخدام AJAX لاسترجاع المعلومات المفصلة من الخادم. سنستخدم لذلك كائن XMLHttpRequest في جافا سكريبت:
JavaScript:
javascriptfunction showDetails(id) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
var details = xhr.responseText;
displayDetails(details);
} else {
alert('Failed to fetch details. Please try again later.');
}
}
};
xhr.open('GET', 'get_details.php?id=' + id, true); // افتراضياً، يجب استبدال 'get_details.php' بمسار الملف الذي يعيد التفاصيل من قاعدة البيانات
xhr.send();
}
function displayDetails(details) {
var detailsBox = document.getElementById("details-box");
var detailsContent = document.createElement("div");
detailsContent.classList.add("details-content");
detailsContent.innerHTML = details;
detailsBox.innerHTML = ''; // حذف المحتوى القديم
detailsBox.appendChild(detailsContent);
detailsBox.style.display = "block";
}
في هذا السكربت، نقوم بإرسال طلب GET إلى ملف PHP (أو أي ملف آخر يتعامل مع قاعدة البيانات) لاسترجاع المعلومات المفصلة باستخدام الـ ID المحدد. بعد استلام الرد، يتم عرض المعلومات في الصندوق باستخدام دالة displayDetails.
وبهذا، قمنا بتحسين المقال لشرح كيفية فتح صندوق جديد عند النقر على رابط داخل جدول البيانات وعرض المعلومات بشكل مفصل. يمكنك تطوير هذا النموذج بمزيد من الخصائص والتنسيقات حسب احتياجاتك ومتطلبات مشروعك.
