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

HTML Inhalte in Tabelle nach festem oder zufälligem Tag eines Monats einblenden

randomtime

Neues Mitglied
Hallo liebes Forum!

Ich hoffe als neuer Benutzer gleich alles richtig zu machen. Wenn nicht, bin ich jederzeit für konstruktive Vorschläge dankbar.

Ich möchte an dieser Stelle noch erwähnen, das mir mit Hinweisen nicht geholfen ist, da ich kaum Programmierkenntnisse habe, diese Aufgabe aber beruflich lösen muss.

Ich habe eine durchsuchbare Tabelle mit ca. 300 Werten bzw. kurzen, verlinkten Texten.

Diese Texte würde ich gerne nach einem zufälligem oder festem Schema sichtbar machen.

Dies ist eine stark verkürzte Version meiner Tabelle:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-deep-orange.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
</head>

<script type="text/javascript">
function addDays(days){
var d = new Date();
d.setDate(d.getDate()+days);
return d;
}
function setDates(){
document.getElementById('date').innerHTML = addDays(0).toLocaleDateString();
}
</script>
<body onload="setDates()">

<style>
* {
box-sizing: border-box;
}

#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 12px;
background-repeat: no-repeat;
width: 100%;
font-size: 14px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 0;
}

#myUL {
list-style-type: none;
padding: 0;
margin: 0;
}

#myUL li a {
border: 1px solid #ddd;
margin-top: -1px; /* Prevent double borders */
background-color: #ff5722;
padding: 12px;
text-decoration: none;
font-size: 16px;
color: white;
display: block
}

#myUL li a:hover:not(.header) {
background-color: #ff5722;
}
</style>

<body>

<!-- Header -->
<header class="w3-container w3-padding-32 w3-center w3-theme">
<button class="w3-btn w3-large w3-theme-dark w3-round-xxlarge"style="font-weight:900;">Last Update: <a id="date"></a></button>
</div>
</div>
</header>

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Sec... finds Secretary, Rec finds Receptionist and so on "title="Search">

<ul id="myUL">
<li><a href="https://www.html.de" target="_blank"><b>Administrative Coordinator - Southampton</b></a></li>
<li><a href="https://www.html.de" target="_blank"><b>Operations Manager - Brighton-and-Hove</b></a></li>
<li><a href="https://www.html.de" target="_blank"><b>Executive Assistant - Kettering</b></a></li>
</ul>
</body>

<script>
function myFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li.getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li.style.display = "";
} else {
li.style.display = "none";
}
}
}
</script>

<!-- Footer -->
<footer class="w3-container w3-theme">
<div class="w3-container w3-padding-16 w3-theme">
<a>Copyright:</a> <a id="year"></a> / <a id="year2"></a>
</div>

<script>
var d = new Date();
document.getElementById("year").innerHTML = d.getFullYear()- 8;
document.getElementById("year2").innerHTML = d.getFullYear();

</script>

<div class="w3-container w3-theme w3-padding-64">
<div class="w3-container w3-theme w3-padding-64">
<div class="w3-container w3-theme w3-padding-64">
<div class="w3-container w3-theme w3-padding-64">
</div>

</body>
</html>

Ich habe zur Veranschaulichung drei Werte übrig gelassen, die an drei verschiedenen Tagen des jeweiligen aktuellen Monats sichtbar sein sollen.

Also der erste Wert immer am ersten eines Monats, der zweite am zweite, der dritte am dritten, usw.

Die Verlinkung auf https://www.html.de dient nur der Veranschaulichung.

Wenn ich meine ca. 300 Werte dann durch max. 31 Tage eines Monats teile, wären dort immer ca. 10 Werte sichtbar, abhängig vom jeweiligen Tag.

Ich wäre euch für ein komplettes Script dankbar.

Liebe Grüsse

Markus
 
Werbung:
Da gibt es wohl viele Wege. Erst den Tag auslesen , heute ist 7 , dann 9 x +31 dazu rechnen und die Zeile , die auch dann die ID hat einfärben.
Tolle Erklärung, wa ?
Guck mal hier so meine ich das

*** Link entfernt, weil nicht mehr erreichbar ***
Mit der ID ist das ja ganz leicht. Wenn du aber keinen Einfluss auf die Id Auswahl hast, kannst du ja auch die Anzahl der li Elemente zählen und dann danach einfärben . Zb id 44 , document.getElementsByTagName('li')[44];
 
Zuletzt bearbeitet:
Hi Basti,

vielen Dank!

Das sieht (für mich) schon mal super aus.

Nur das ich leider nicht verstehe wie ich Dein Script und meine Werte zusammenbringe.

Kannst Du mir das bitte anhand meiner Beispiele mit fester ID zusammenbauen, so wie es später aussehen könnte?

Nur um ganz sicher zugehen, die möchte immer nur die Werte des jeweils definierten Tages X einblenden, alle anderen sind an diesem Tag X dann nicht sichtbar.

Vielen Dank

Beispiel für jeweils 10 Jobs an den ersten drei Tagen

<ul id="myUL">

<li><a href="https://www.html.de" target="_blank"><b>Job1, Tag 1</b></a></li>
<li><a href="https://www.html.de" target="_blank"><b>Job2, Tag 1</b></a></li>
<li><a href="https://www.html.de" target="_blank"><b>Job3, Tag 1</b></a></li>
<li><a href="https://www.html.de" target="_blank"><b>Job4, Tag 1</b></a></li>
<li><a href="https://www.html.de" target="_blank"><b>Job5, Tag 1</b></a></li>
<li><a href="https://www.html.de" target="_blank"><b>Job6, Tag 1</b></a></li>
<li><a href="https://www.html.de" target="_blank"><b>Job7, Tag 1</b></a></li>
<li><a href="https://www.html.de" target="_blank"><b>Job8, Tag 1</b></a></li>
<li><a href="https://www.html.de" target="_blank"><b>Job9, Tag 1</b></a></li>
<li><a href="https://www.html.de" target="_blank"><b>Job10, Tag 1</b></a></li>

<li><a href="https://www.html.de" target="_blank"><b>Job1, Tag 2</b></a></li>
<li><a href="https://www.html.de" target="_blank"><b>Job2, Tag 2</b></a></li>
<li><a href="https://www.html.de" target="_blank"><b>Job3, Tag 2</b></a></li>
<li><a href="https://www.html.de" target="_blank"><b>Job4, Tag 2</b></a></li>
<li><a href="https://www.html.de" target="_blank"><b>Job5, Tag 2</b></a></li>
<li><a href="https://www.html.de" target="_blank"><b>Job6, Tag 2</b></a></li>
<li><a href="https://www.html.de" target="_blank"><b>Job7, Tag 2</b></a></li>
<li><a href="https://www.html.de" target="_blank"><b>Job8, Tag 2</b></a></li>
<li><a href="https://www.html.de" target="_blank"><b>Job9, Tag 2</b></a></li>
<li><a href="https://www.html.de" target="_blank"><b>Job10, Tag 2</b></a></li>

<li><a href="https://www.html.de" target="_blank"><b>Job1, Tag 3</b></a></li>
<li><a href="https://www.html.de" target="_blank"><b>Job2, Tag 3</b></a></li>
<li><a href="https://www.html.de" target="_blank"><b>Job3, Tag 3</b></a></li>
<li><a href="https://www.html.de" target="_blank"><b>Job4, Tag 3</b></a></li>
<li><a href="https://www.html.de" target="_blank"><b>Job5, Tag 3</b></a></li>
<li><a href="https://www.html.de" target="_blank"><b>Job6, Tag 3</b></a></li>
<li><a href="https://www.html.de" target="_blank"><b>Job7, Tag 3</b></a></li>
<li><a href="https://www.html.de" target="_blank"><b>Job8, Tag 3</b></a></li>
<li><a href="https://www.html.de" target="_blank"><b>Job9, Tag 3</b></a></li>
<li><a href="https://www.html.de" target="_blank"><b>Job10, Tag 3</b></a></li>

</ul>
 
Werbung:
Ja, also feste Id hatte ich dir ja gezeigt.
In deinen Jetzigen HTML Code, den du geschrieben hast, sind keine Id's zu sehen.
Kannst du den ganzen li Elementen eine Id geben?

Wenn nicht, geht es auch ohne Id's.
Im jetzigen Beispiel habe ich die Tage als Sekunden gemacht, damit man das Wechseln der (Tage ) besser sehen kann.
*** Link entfernt, weil nicht mehr erreichbar ***
( d.getSecond müsstest du wieder in d.getDays ändern)

Wo kommen deine li Elemente den her? Wird das mit PHP oder so wie in mein Beispiel, mit Javascript zusammen gebaut , oder stehen alle 300 Elemente komplett in HTML geschrieben?

Falls es mit Script erstellt wird, wäre es auch einfacher nur die 10 Felder am Tag einzublenden( oder erstellen) die gerade an diesen Tag gezeigt werden soll.

Wenn du mit der Konsole den HTML Code ankucken tust , siehst du das alle 300 Elemente da sind, aber immer nur die 10 eingeblendet werden die für den Tag da sind . Einfacher wäre es nur die zu erstellen, die man an den Tag brauch. Das kommt darauf an wo und wie du den HTML Code herbekommen tust
 
Zuletzt bearbeitet:
Hi Basti!

Vielen Dank für Deine schnelle Antwort.

Meinst Du das so mit den Id`s?

Beispiel:

<li><id="1"><a href="https://www.html.de" target="_blank"><b>Job1, Tag 1</b></a></li>
<li><id="1"><a href="https://www.html.de" target="_blank"><b>Job2, Tag 1</b></a></li>
<li><id="2"><a href="https://www.html.de" target="_blank"><b>Job1, Tag 2</b></a></li>
<li><id="2"><a href="https://www.html.de" target="_blank"><b>Job2, Tag 2</b></a></li>
<li><id="3"><a href="https://www.html.de" target="_blank"><b>Job1, Tag 3</b></a></li>
<li><id="3"><a href="https://www.html.de" target="_blank"><b>Job2, Tag 3</b></a></li>
<li><id="4"><a href="https://www.html.de" target="_blank"><b>Job1, Tag 4</b></a></li>
<li><id="4"><a href="https://www.html.de" target="_blank"><b>Job2, Tag 4</b></a></li>
<li><id="5"><a href="https://www.html.de" target="_blank"><b>Job1, Tag 5</b></a></li>
<li><id="5"><a href="https://www.html.de" target="_blank"><b>Job2, Tag 5</b></a></li>

Ich kann Dir gerne eine gesamte Liste als Vorlage zusammenbauen.

Um Deine Frage zu beantworten, die Daten sind alle statisch in html hinterlegt.

Meine Frage zu Schluss: Wo ist den der Code aus der ersten Variante hin? Hast du den noch?

Gruss

Markus
 
Werbung:
Leide sah und fand ich kein Beispiel.

Deswegen habe ich ja eins vorgeschlagen.

Wenn Du eins siehst dann poste es doch bitte.

Danke
 
Wenn Ihr das meint

<div id="info"></div>

weiß ich immer noch nicht wie ein Beispiel aussehen soll.

Das kann ich mir stundenlang anschauen und komme nicht weiter.

Wenn Ihr beide das wisst, dann helft mir doch bitte mit einem konkretem Beispiel weiter.

Rätselraten hilft mir auch nicht weiter.

Ich sehe nur:


<body>

<ul id="myUL">

</ul>
<div id="info"></div>
</body>


<script>
/das Script hat nix mit deinen zu tun weil ich damit nur die 30 Felder erzeuge weil ich zu faul bin die als html zu schreiben/
rein=document.getElementById('myUL');
for(a=1;a<=31;a++){
for(h=1;h<=10;h++){

li=document.createElement('li');
li.innerHTML='<a href="https://www.html.de" target="_blank"><b>Job'+h+', Tag '+a+'</b></a>';
rein.appendChild(li);
}
}
</script>
<script>
setInterval(function(){
alles=document.querySelectorAll('li').forEach((p)=>{
p.style.display='none';
})
var d = new Date();
var n = (d.getSeconds()-0)/2;
n=n.toFixed(0);

for(j=(n10);j<=n10+9;j++){

document.getElementsByTagName('li')[j].style.display='block';
}
var n1=parseInt(n)+1;
document.getElementById('info').innerHTML='Heute ist der '+n1+' - '+d.getMonth()+' - '+d.getFullYear();
},1000);



</script>

... und weiß auch gar nicht wie der untere orangene Block erzeugt wird.

Ich habe keine Programmierkenntnisse, muss aber für meinen Chef bis morgen eine brauchbare Lösung haben.

Danke

P.S. Und toll wäre wenn die ganze Lösung dann noch funktioniert, also auch die Suche über die gerade sichtbaren Werte und die anderen beiden Zeitangaben.
 
Werbung:
Ich glaube das hat so kein sinn.
Gehen wir mal zurück zu post 1#

Ich habe eine durchsuchbare Tabelle mit ca. 300 Werten bzw. kurzen, verlinkten Texten.
Diese Texte würde ich gerne nach einem zufälligem oder festem Schema sichtbar machen.

Gehe mal nach codepen , und mach das html dazu fertig , so wie du es da hast.
Wie ich es da sehe hast du da ja keine id's .Wenn du das aber ändern darfst und kannst brauch jedes <li> eine andere id. Zb <li id="id1"> , <li id="id2"> usw. Doppelte id's darf es nicht geben. Das könnte man mit Class machen was hier vieleicht auch nicht schlecht wäre .
Aber mach mir mal das html fertig was du in post 1# beschrieben hast.
Aber bei Codepen ,das wird hier zu unübersichtlich.

... und weiß auch gar nicht wie der untere orangene Block erzeugt wird.

Durch Javascript,
Javascript:
rein=document.getElementById('myUL');
for(a=1;a<=31;a++){
for(h=1;h<=10;h++){

li=document.createElement('li');
li.innerHTML='<a href="https://www.html.de" target="_blank"><b>Job'+h+', Tag '+a+'</b></a>';
rein.appendChild(li);
}
}
ist das gleiche als wenn ich die 300 Zeilen komplett in html selber rein schreibe , nur so kann ich in einen Beispiel Zeit sparen.Deswegen ist der Teil vom Script für dich erstmal nicht wichtig weil du ja das html ja schon hast und nicht mehr erstellen mußt


und was soll das ?

P.S. Und toll wäre wenn die ganze Lösung dann noch funktioniert, also auch die Suche über die gerade sichtbaren Werte und die anderen beiden Zeitangaben.

Was soll das für nee suche sein ?
Es sind ja immer nur 10 Links sichtbar , was willst du da durchsuchen ?
Oder meinst du das du Tag 14 in der suche eintippen tust und dann die 10 Links von Tag 14 Sichtbar werden?


achso. Das Script aus post 2# habe ich irgendwie überschrieben , weil Codepen bei mir irgendwann automatisch speichert wenn man nach einer bestimmten Zeit nicht selber speichert
 
Hi Basti!

Danke für Deine Antworten, Hilfe und Geduld.

Meinst Du mit CLASS Blöcke pro Tag? Also insgesamt 31 KLASSEN/Blöcke für alle möglichen 31 Tage? Das wäre genau das was ich brauche:

So nach dem Motto:

<li><class="1"><a href="https://www.html.de" target="_blank"><b>Job1, Tag 1</b></a></li>
<li><class="1"><a href="https://www.html.de" target="_blank"><b>Job2, Tag 1</b></a></li>
<li><class="2"><a href="https://www.html.de" target="_blank"><b>Job1, Tag 2</b></a></li>
<li><class="2"><a href="https://www.html.de" target="_blank"><b>Job2, Tag 2</b></a></li>
<li><class="3"><a href="https://www.html.de" target="_blank"><b>Job1, Tag 3</b></a></li>
<li><class="3"><a href="https://www.html.de" target="_blank"><b>Job2, Tag 3</b></a></li>
<li><class="4"><a href="https://www.html.de" target="_blank"><b>Job1, Tag 4</b></a></li>
<li><class="4"><a href="https://www.html.de" target="_blank"><b>Job2, Tag 4</b></a></li>
<li><class="5"><a href="https://www.html.de" target="_blank"><b>Job1, Tag 5</b></a></li>
<li><class="5"><a href="https://www.html.de" target="_blank"><b>Job2, Tag 5</b></a></li>

Dann könnte eine Klasse 3 Werte haben, eine andere 30.

Zur zeit sind es ca 300, aber in naher Zukunft eventuell 1000 oder mehr und dann wäre eine Suche schon hilfreich, wenn es geht.

Kannst Du mit dem Aufbau leben? Dann mache ich die anderen auch so: <li><class="1"><a href="https://www.html.de" target="_blank"><b>Job1, Tag 1</b></a></li>

Danke

Markus
 
Bitte lerne die Grundlagen!

Du setzt sowohl ID als auch Class falsch! Siehe

 
Werbung:
Ich bin kein Programmierer, will auch gar keiner werden, habe normalerweise einen ganz anderen Job, aber nur mal diese Aufgabe von meinem Chef.

Muss man erst Konditor lernen, damit man hier ein Stück Kuchen bekommt?

Mit einem konkreten Beispiel ist mir mehr geholfen, als mit euren Bemerkungen oder Links zu allgemeinen Regeln die ein Laie nicht versteht.

Schick mir bitte eine Vorlage, dann lerne ich schneller, denn diese Kommentare sind einfach nur uneffektiv.
 
Zumindest bist du ja ehrlich das du es gar nicht lernen willst.Warum gibt dir den der Chef dann so ne Aufgabe ?.
@m.scatello und co geben dir solche Links weil man von ausgegangen ist das du auch was lernen willst dabei.
Auch wenn du die Links nicht lesen tust , gibt es auch andere die das lesen und damit geholfen ist.

Aber zurück zum Thema. Das durch klassen zu machen ist natürlich am einfachsten,so kann man auch ganz einfach weitere Links hinzufügen.
Noch einfacher wäre es jetzt noch mit jquery. Da du nix lernen willst würde ich das jetzt auch nutzen , doch da auch andere Leute das Thema finden können und als hilfe nutzen könnte führen wir das jetzt auch ohne Jquery weiter.

Wegen den Id's und Classen was gesagt wurde , ist dein Fehler das du nur ne Zahl nimmst . ( Zb id="1" ).
Es muß zumindest so heißen ( id="a1" ) oder so was . Auch ist ( wahr ) es verboten das eine id mit einer Zahl beginnt. Mitlerweile ist das wohl erlaubt .

Willst du in dein Script nur die suche haben die nach Tagen sucht , oder auch nach Wörter die im Link stehen könnten ?
 
Ich bin kein Programmierer, will auch gar keiner werden
Dann bist du hier falsch, denn hier gibt es Hilfe zur Selbsthilfe, nicht mehr und nicht weniger.

aber nur mal diese Aufgabe von meinem Chef.
Dann sage deinem Chef, dass du es nicht kannst und auch nicht bereit bist, dafür zu lernen.

Muss man erst Konditor lernen, damit man hier ein Stück Kuchen bekommt?
Du musst aber wissen, welche Zutaten du brauchst, und wenn du die nicht kennst, wird es nichts mit dem Kuchen.

Mit einem konkreten Beispiel ist mir mehr geholfen
Hast du bekommen

Links zu allgemeinen Regeln die ein Laie nicht versteht.
Da ist nicht viel zu verstehen, allerdings ist Eigeninitiative angesagt.

Schick mir bitte eine Vorlage
Garantiert nicht, denn das ist hier kein "Wer macht mir mal Forum"

diese Kommentare sind einfach nur uneffektiv.
Weil du zu faul zum lernen bist
 
Werbung:
Hi Basti!

Danke für Dein Verständnis.

Erstens: Ich bin kein Programmierer, sondern arbeite im Marketing.
Zweitens: Hatte der sonst zuständige Kollege einen schweren Sportunfall und liegt im Krankenhaus.
Drittens: Kam mein Chef auf die Idee das ich mich dieser Sache annehmen sollte. Da kann man schlecht nein sagen oder?

Bzgl. der Suche: Er wäre hilfreich nach den jeweils aktuell sichtbaren, realen Werten suchen zu können. Also wenn da am Tag 1 bei 10 Werten 3 mal London steht und man LON eingibt reduziert sich das auf die drei aus London.

Aber immer nur die aktuell sichtbaren.

Jetzt weiß ich leider immer noch nicht wie genau eine Zeile in der Tabellenstruktur aussehen muss.

Eine Vorlagezeile wäre mein heutiges Tagesziel, dann übertrage ich die auf meine bisherige Vorlage und lade die bei codepen hoch.

Danke

Markus
 
Warum ist das wo das aktuelle Datum steht ein Button ?Soll das irgend dein Sinn ergeben oder nee Funktion bekommen ?

Jetzt weiß ich leider immer noch nicht wie genau eine Zeile in der Tabellenstruktur aussehen muss.

So

Aber die Suche geht noch nicht weil muss erstmal zwei Stunden weg.
Der Blendet jetzt nur die Felder vom heutigen Tag ein,

vieleicht macht da noch einer die Suche fertig in den nächsten 2 Stunden oder du kuckst mal wie du es machen würdest. Ansonsten kucke ich vieleicht in ca 2 Stunden noch mal rein
 
Zuletzt bearbeitet:
Kam mein Chef auf die Idee das ich mich dieser Sache annehmen sollte. Da kann man schlecht nein sagen oder?
Doch, kann man. Wenn man etwas machen soll, was nicht zu seinem Beruf gehört und keine Ahnung davon hat, dann wäre es sogar deine Pflicht zu sagen, dass du das nicht kannst. Oder fummelst du morgen an den Bremsen am Auto deines Chefs rum, wenn dein Chef dir das sagt?
 
Werbung:
Super!

Danke Basti!

Das bißchen Input/Vorlage hatte mir gefehlt: <li class="tag1"><a href="https://www.html.de" target="_blank"><b>Job1, Tag 1</b></a>

Jetzt verstehe ich auch die Logik.

Danke auch für die Erstellung der Monats-Tabelle, entspricht quasi meiner Vorlage.

Das aktuelle Datum im Button "Update: 08.09.2019" soll zeigen das die Einträge in der Tabelle quasi "tagesaktuell" sind.

Allerdings ist bei der aktuellen Vorlage das Datum 08.08.2019, also ein Monat zu spät. Ich hatte da schon rumprobiert, aber wenn ich das Datum (mit meinen Ursprungsscript ) wieder auf heute gesetzt hatte, ging Dein Script wieder nicht. Ich hatte vorhin (nicht das ich nicht fleissig gelernt hätte heute) woanders gesehen, das der Monat Januar = 0 ist, statt = 1. Und da genau ein Monat im Update Datum`s Button fehlt ist das vielleicht ein kreativer, strategischer Ansatz.

Auf jeden Fall bräuchte ich das aktuelle Datum im Update Button und natürlich in der Tabelle.

Und die Suche wäre ein Traum

Gruss

Markus
 
Wie muss ich den Javascript Code einschliessen und wo sollte ich ihn am besten platzieren?

var d = new Date();
document.getElementById('date').innerHTML = d.getDate()+'.'+d.getMonth()+'.'+d.getFullYear();


/* Zeigt heutigen Tag */
var n = (d.getDate());
document.querySelectorAll('.tag'+n).forEach((p)=>{
p.style.display='block';
})

document.getElementById("year").innerHTML = d.getFullYear()- 8;

document.getElementById("year2").innerHTML = d.getFullYear();

Danke

Markus
 
Zurück
Oben