Hallo Community :)
Ich möchte gerne via Javascript automatisch W3 Cards erstellen. Wenn ich es normal via HTML mache funktioniert es perfekt. Hier der Code:
Wenn ich die komplette Card kopiere und wieder einfüge, sehe ich schön nebeneinander die Cards. Probiere ich das ganze mit Javascript, wird mir leider immer alles in eine Card geschrieben. Kompletter Code:
Übersehe ich was oder kann es sein das ich es nicht mit einer for Schleife lösen kann? Vielen Dank für die Hilfe :) gehöre noch zu den Anfängern ^^
Grüsse waffi
Ich möchte gerne via Javascript automatisch W3 Cards erstellen. Wenn ich es normal via HTML mache funktioniert es perfekt. Hier der Code:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="colors.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="stylesheet" type="text/css" href="fontawesome/css/all.css">
<title>Meine</title>
</head>
<body class="w3-light-gray">
<!-- Overlay Area while site-navigation is appearing -->
<div class="w3-overlay w3-animate-opacity" style="cursor:pointer" id="myOverlay" onclick="nav_close()"></div>
<!-- End Sidebar-->
<div class="w3-sidebar w3-bar-block w3-animate-left w3-theme-d4" style="display:none;z-index:5" id="mySidebar">
</div>
<main class="w3-row-padding">
<!-- ------------------- Erster Kontakt ------------------------------ -->
<article class="w3-container w3-col w3-animate-zoom s12 m6 l4 w3-padding-16">
<div class="w3-card-2 w3-hover-shadow w3-white">
<header class="w3-container w3-margin-bottom w3-theme-l2"></header>
<div class="w3-container">
<table class="w3-table">
<tr>
<td>test</td>
</tr>
<tr>
<td>test</td>
</tr>
</table>
</div>
</div>
</article>
</main>
<footer class="w3-theme-d5 w3-row-padding">
</footer>
</body>
</html>
Wenn ich die komplette Card kopiere und wieder einfüge, sehe ich schön nebeneinander die Cards. Probiere ich das ganze mit Javascript, wird mir leider immer alles in eine Card geschrieben. Kompletter Code:
HTML:
<!DOCTYPE html>
<!-- saved from url=(0076)https://www.w3schools.com/w3css/tryw3css_templates_gourmet_catering.htm#home -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Wetterstation</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./W3.CSS Template_files/w3.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="colors.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="stylesheet" type="text/css" href="fontawesome/css/all.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<!-- Navbar (sit on top) -->
<div class="w3-top">
<div class="w3-bar w3-white w3-padding w3-card" style="letter-spacing:4px;">
<a href="/index.html" class="w3-bar-item w3-button">Startseite</a>
<!-- Right-sided navbar links. Hide them on small screens -->
<div class="w3-right ">
<a href="/daten.php" class="w3-bar-item w3-button">Daten</a>
<a href="/nodes.php" class="w3-bar-item w3-button">Nodes</a>
<a href="http://172.20.10.6/pma" class="w3-bar-item w3-button">PMA</a>
</div>
</div>
</div>
<!-- Header -->
<header class="w3-display-container w3-content w3-wide" style="max-width:1600px;min-width:500px" id="home">
<div class="w3-display-bottomleft w3-padding-large w3-opacity">
<h1 class="w3-xxlarge">Le Catering</h1>
</div>
</header>
<div class="w3-content" style="max-width:1100px">
<script>
tab = '<main class="w3-row-padding"><article class="w3-container w3-col w3-animate-zoom s12 m6 l4 w3-padding-16"><div class="w3-card-2 w3-hover-shadow w3-white"><header class="w3-container w3-margin-bottom w3-theme-l2"></header><div class="w3-container"><table class="w3-table">'; //hier wird die tabelle göffnet
for(ii=0;ii<2;ii++){
tab = tab + "<h3>Node</h3>";
}
tab = tab + '</table></div></div></article> </main>';
document.write(tab);
</script>
</div>
<footer class="w3-center w3-light-grey w3-padding-32">
<p>Powered by <a href="https://www.w3schools.com/w3css/default.asp" title="W3.CSS" target="_blank" class="w3-hover-text-green">w3.css</a></p>
</footer>
</body>
</html>
Übersehe ich was oder kann es sein das ich es nicht mit einer for Schleife lösen kann? Vielen Dank für die Hilfe :) gehöre noch zu den Anfängern ^^
Grüsse waffi