• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

W3 Cards mit Javascript erstellen

waffi

Neues Mitglied
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:

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
 
Werbung:
Werbung:
Ich glaube das ist auch etwas eine Frage der Philosophie und vor allem der Komplexität des Projekts.

Korrekt ist es sicherlich, funktionieren tut es an sich auch, wenn man sich dann allerdings angewöhnt JS in separaten Dateien zu halten (was ich als sehr sinnvoll erachte) funktioniert es dann halt nicht mehr und mann muss die Daten über einen Request zu holen. Auch das Debugging ist meines Erachtens dann viel einfacher. Der Ton bei phpdotde ist ab und zu sehr rau und auch etwas gewöhnungsbedürftig.

Die Hinweise in #6 dort sind aber wichtig, per document.write() etwas rauszuschreiben ist nicht ideal.

Ebenfalls empfehlenswert ist es sich mit den Dev-Tools des Browsers vertraut zu machn (F12 auf einer Windows-Maschiene). Dort könnte man den Fehler sicher selbst eruieren.
 
Guten Morgen ihr Lieben :)

Sorry wenn ich gleich in zwei verschiedene Forum die Frage gestellt habe, war gestern nervlich bisschen am Limit und als ich im anderem Forum nur korrigiert wurde, hab ich gedacht das ich hier auch mal nachfrage :)

Ich hab das ganze jetzt mit der Vorlage von CPCoder ausprobiert und für meine Zwecke angepasst. Funktioniert perfekt :)

Danke euch für euren Input und eure Zeit.

Liebe Grüsse waffi
 
Zurück
Oben