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>