إخفاء وإظهار عنصر html عن طريق javascript

ليان أبو شعر · 3 ديسمبر 2021

كيف ممكن أبرمج الزر More Detailes بلغة جافا بحيث لما أضغط عليه يظهر الجدول وزررين آخرين

Book A sessionو زر Less Detailesممكن شرح للسؤال وشكراً مقدما

Salah Eddin Beriani2 · 3 ديسمبر 2021

بالجافاسكريبت يمكنك فعل ذلك بسهولة عن طريق التلاعب بخاصية display في css

<button onclick="myFunction()">show</button>

<tabel id="table">
...
</table>

function myFunction() {
  var x = document.getElementById("table");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

ويمكنك استخدام الاستراتيجية ذاتها لاخفاء زر الاظهار مثلا واظهار زر الاخفاء

ليان أبو شعر · 3 ديسمبر 2021

بتاريخ 2 ساعات قال Salah Eddin Berriani:
بالجافاسكريبت يمكنك فعل ذلك بسهولة عن طريق التلاعب بخاصية display في css
<button onclick="myFunction()">show</button>

<tabel id="table">
...
</table>
function myFunction() {
  var x = document.getElementById("table");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
ويمكنك استخدام الاستراتيجية ذاتها لاخفاء زر الاظهار مثلا واظهار زر الاخفاء

تمنام شكرا بي لما كتبت الكود ع Html وربكه بكود جافا النتيجة طلعت مش جدول زي م انا أنشأت ولا الزر زي م أنا بدي لازم يكون بالأول بس زر واحد ظاهر اسمو More Detaile لما أضغط عليه يظهر الجدول وكمان زرين Book A sessionو زر Less Detailesلوسمحت آسفة ع الإزعاج بس فيك اتساعدني وشكرا كتيير

تمام شكرا بس لما كتبت الكود ع Html وربطه بكود جافا النتيجة طلعت مش جدول زي م انا أنشأت ولا الزر زي م أنا بدي لازم يكون بالأول بس زر واحد ظاهر اسمو More Detaile لما أضغط عليه يظهر الجدول وكمان زرين Book A sessionو زر Less Detailesلوسمحت آسفة ع الإزعاج بس فيك اتساعدني وشكرا كتيير

Salah Eddin Beriani2 · 3 ديسمبر 2021

بتاريخ 58 دقائق مضت قال ليان أبو شعر:

تمنام شكرا بي لما كتبت الكود ع Html وربكه بكود جافا النتيجة طلعت مش جدول زي م انا أنشأت ولا الزر زي م أنا بدي لازم يكون بالأول بس زر واحد ظاهر اسمو More Detaile لما أضغط عليه يظهر الجدول وكمان زرين Book A sessionو زر Less Detailesلوسمحت آسفة ع الإزعاج بس فيك اتساعدني وشكرا كتيير

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    #container {
      display: none;
    }
  </style>
  <body>
    <button id="show" onclick="show()">show detials</button>
    <div id="container">
      <table>
        <tr>
          <th>Company</th>
          <th>Contact</th>
          <th>Country</th>
        </tr>
        <tr>
          <td>Alfreds Futterkiste</td>
          <td>Maria Anders</td>
          <td>Germany</td>
        </tr>
        <tr>
          <td>Centro comercial Moctezuma</td>
          <td>Francisco Chang</td>
          <td>Mexico</td>
        </tr>
        <tr>
          <td>Ernst Handel</td>
          <td>Roland Mendel</td>
          <td>Austria</td>
        </tr>
        <tr>
          <td>Island Trading</td>
          <td>Helen Bennett</td>
          <td>UK</td>
        </tr>
        <tr>
          <td>Laughing Bacchus Winecellars</td>
          <td>Yoshi Tannamuri</td>
          <td>Canada</td>
        </tr>
        <tr>
          <td>Magazzini Alimentari Riuniti</td>
          <td>Giovanni Rovelli</td>
          <td>Italy</td>
        </tr>
      </table>
      <button onclick="hide()">less detials</button>
      <button>book</button>
    </div>
  </body>
  <script>
    var x = document.getElementById('container'); //تحديد الحاوية
    var b = document.getElementById('show'); // تحديد زر الاظهار
    function show() {
      x.style.display = 'block'; // اظهار الحاوية
      b.style.display = 'none'; //اخفاء زر الاظهار
    }
    function hide() {
      x.style.display = 'none'; // اخفاء الحاوية
      b.style.display = 'block'; // اظهار زر الاظهار
    }
  </script>
</html>

هذا مثال واضح اقرايه جيدا وستستطيعين تنفيذ ما تريدين

إخفاء وإظهار عنصر html عن طريق javascript

السؤال

ليان أبو شعر

رابط هذا التعليق

شارك على الشبكات الإجتماعية

3 أجوبة على هذا السؤال

Recommended Posts

Salah Eddin Beriani2

رابط هذا التعليق

شارك على الشبكات الإجتماعية

ليان أبو شعر

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Salah Eddin Beriani2

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية