إظهار / إخفاء الجدول باستخدام زر في صفحة PHP

Question

أريد عرض جدول بيانات عند النقر فوق زر في صفحة PHP نفسها. يستخدم الزر في شكل مدخلات أخرى مثل بعض النص. جدول البيانات هو الاختباء افتراضيا. والحصول على القيم من النموذج، ثم قم بإجراء استعلام في قاعدة البيانات وعرضها فيه.

كيف يمكنني تحقيق وظيفة العرض / إخفاء؟

هل لديك أي حلول؟

شكرا.

Answer 1

في مشكلة AJAX بسيطة، يمكنك استخدام أي مكتبة نصية Java الشهيرة لتحقيق هذه الوظيفة لإجراء مكالمات AJAX وإظهار / إخفاء الجدول. على سبيل المثال، يمكنك استخدام وظيفة JQuery's Ajax للحصول على البيانات من الخادم ثم استخدم تأثيرات JQuery المدمجة في إظهار الجدول المرفق في DIV. على سبيل المثال، لعرض المحتوى في DIV 'MyDiv'، ببساطة الكتابة $("#mydiv").show(); وإخفاء المحتوى، اكتب $("#mydiv").hide();

Answer 2

إذا كنت بخير باستخدام جافا سكريبت، فامنح table علامة id ينسب. ثم، لديك onclick الحدث على الزر الذي يغير CSS table أن تكون display:none. وبعد تغيير جافا سكريبت الزر بحيث يتم النقر فوق المرة التالية، فستبدل table CSS ليكون display:table. وبعد يمكنك أيضا استخدام مكتبة JavaScript، مثل النموذج المبدئي, ، لفعل هذا.

<table id="myTable">
</table>

<input id="toggleButton" type="button" onclick="hideTable(true);" value="Toggle Table" />

وقد تكون جافا سكريبت:

function toggleDisplay(var hide) {
  if (hide) {
    document.getElementById('myTable').style.display = "none";
    document.getElementById('toggleButton').onclick = hideTable(false);
  } else {
    document.getElementById('myTable').style.display = "table";
    document.getElementById('toggleButton').onclick = hideTable(true);
  }
}

خذ هذا الجافا سكريبت مع حبة الملح؛ أنا لم أكتب بعد فترة من الوقت.

إذا كنت لا ترغب في استخدام JavaScript، فقم بإرسال زر نموذج HTML عادي. تمر جنبا إلى جنب في شكل بعض اسم المدخلات مثل hide_table مع قيمة true. وبعد على الخادم، إذا $_POST['hide_table'] == "true", ، لا تسمح للجدول أن يكون إخراج HTML إلى الصفحة. أيضا، قم بتبديل النموذج الذي يؤدي النقر فوق الزر إلى إرساله hide_table مع قيمة false.

<form method="post" action="the_same_page.php">
  <input type="hidden" name="hide_table" value="<?php echo $_POST['hide_table'] == "true" ?>" />
  <input type="button" value="Toggle Table" />
</form>

<?php if ($_POST['hide_table'] != "true") { ?>
  <table>
  </table>
<?php } ?>

إذا كنت ترغب في استخدام Ajax لتحميل محتوى الجدول فقط عندما يقرر المستخدم إظهاره، فسيكون من الجيد أن يجعل هذا يتحلل بأمان. إذا لم يكن لدى المستخدم تمكين جافا سكريبت، يجب أن يقدم النموذج في الواقع إلى الخادم وإعادة تحميل الصفحة، فقم بتبديل عرض الجدول. ومع ذلك، إذا كان لدى المستخدم تمكين جافا سكريبت، فقد يتم إجراء مكالمة AJAX وتحميل الجدول وعرضها في المكان.

Answer 3

على افتراض أنك تريد القيام بهذا الجانب العميل (أي يتم إرسال جميع البيانات إلى العميل في تحميل الصفحة)، كل ما عليك فعله هو شيء يجب القيام به هو شيء يجب القيام به هو شيء ما: (

...
<input type="button" id="showTableBtn" value="Show Table">
<table id="dataTable">
    ...
</table>

<script type="text/javascript">
<!--
Event.observe($("showTableBtn"), "click", toggleTable);

function toggleTable() {
    if ($("showTableBtn").value == "Show Table") {
         $("dataTable").show();
         $("showTableBtn").value = "Hide Table";
    } else {
         $("dataTable").hide();
         $("showTableBtn").value = "Show Table");
    }
}

//-->
</script>
...