W3 CSS w3-hoverable problem

Hervé · March 25, 2016

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>

Sign In

W3 CSS w3-hoverable problem

Recommended Posts

Hervé

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity