Jump to content

Hervé

Members
 View Profile  See their activity

  • Posts

    1

  • Joined

  • Last visited

Hervé's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. Hervé
    Hello, I tried opening a w3-modal form with a dynamic table including w3-hoverable w3-striped className but hover and striped style was not visible. Here is my "tryit" code. Could you help me ? Many thanks. Hervé <!DOCTYPE html> <html> <title>W3.CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> <body class="w3-container"> <h2>W3.CSS Animated Modal</h2> <p>Zoom in the modal with the w3-animate-zoom class, or slide in the modal from a specific direction using the w3-animate-top, w3-animate-bottom, w3-animate-left or w3-animate-right class:</p> <button onclick="document.getElementById('id01').style.display='block'" class="w3-btn">Open Animated Modal</button> <div id="id01" class="w3-modal"> <div class="w3-modal-content w3-animate-zoom w3-card-8"> <header class="w3-container w3-teal"> <span onclick="document.getElementById('id01').style.display='none'" class="w3-closebtn">×</span> <h2>Modal Header</h2> </header> <div class="w3-container"> <div id="userstable" class="w3-section"> <script> function InsertUsersTable() { var tr, th, td, tx var table = document.createElement('table'); table.className = 'w3-table w3-hoverable w3-striped w3-bordered'; tr = document.createElement('tr'); tr.className = 'w3-dark-grey'; table.appendChild(tr); th = document.createElement('th'); tx = document.createTextNode('Col1'); th.appendChild(tx); tr.appendChild(th); th = document.createElement('th'); tx = document.createTextNode('Col2'); th.appendChild(tx); tr.appendChild(th); th = document.createElement('th'); tx = document.createTextNode('Col3'); th.appendChild(tx); tr.appendChild(th); for (var i = 0; i < 3; i++){ tr = document.createElement('tr'); table.appendChild(tr); td = document.createElement('td'); tx = document.createTextNode('Text1'); td.appendChild(tx); tr.appendChild(td); td = document.createElement('td'); tx = document.createTextNode('Text2'); td.appendChild(tx); tr.appendChild(td); td = document.createElement('td'); tx = document.createTextNode('Text3'); td.appendChild(tx); tr.appendChild(td); } var elmnt = document.getElementById('userstable') elmnt.appendChild(table); } InsertUsersTable(); </script> </div> </div> <footer class="w3-container w3-teal"> <p>Modal Footer</p> </footer> </div> </div> </body> </html>
×
×
  • Create New...