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

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

Werbung:
Du wirst es kaum glauben. Die Varianten hatte ich alle schon probiert. Nur egal welche ich einsetze, die komplette Datumsfunktion geht dann nicht und es werden immer alle Einträge in der Tabelle angezeigt, nicht nur die von heute, weil ja eben die Datumsfunktion nicht geht.

Ich habe den JS Code aus Codepen kopiert und folgende Varianten probiert:

<script language="javascript" type="text/javascript"> <!-- ... hier kommt das JavaScript-Programm --> </script>

<script> ... hier kommt das JavaScript-Programm </script>

Im Head im Body usw.

Also nochmal die Frage: wie und wo kommt JS rein?
 
Ja,ich denke mal das du das <script> nach oben rein gesetzt hast. Das müsste in diesen Fall am ende des Scriptes sein.
Deine erste Version mit <script language="javascript" type="text/javascript"> ist auch veraltet und wird so nicht mehr genutzt.
So jetzt ist Ende. Falls du sowas nochmal für deinen Chef machen willst sag am besten ab das du es nicht kannst , oder versuche das du den kram dann lernst.
Bei Leuten die es lernen wollen und es auch selber versuchen wird in der Regel lieber geholfen.
Normalerweise bekommt man so ja keine hilfe weil du das für dein Chef machst und du den Lohn dafür bekommst und so weiter.

Hier jetzt mit Suchfunktion wenn ich es richtig verstanden habe . gib mal in der suche Job1 oder Job2 oder so ein dann siehst du was ich meine

 
Zuletzt bearbeitet:
Werbung:
Super! Danke!

Mit den markierten/hervorgehobenen Treffern ist klasse!

Auch auf die Gefahr hin das ich hier gleich gekreuzigt werde, geht die Such auch wie in meiner Ursprungsvorlage das er nur die Werte anzeigt, die gefunden werden?

Bei 10 Tageswerten und 3 Treffern = London findet er bei LON nur die 3 aus London?

Danke

Markus
 
??.
Du sagst ja das alle Spalten vom heutigen Tag angezeigt werden sollen.
Zusätzlich die suche . So ist es ja jetzt.
Du willst das jetzt so haben das er gar nix anzeigt und wenn man dann in der suche was ein geben tut das er dann nur die Treffer anzeigt von den heutigen Tag ?
Dann ändere den Javascript Teil so
Javascript:
<script>
var d = new Date();
document.getElementById('date').innerHTML =  d.getDate()+' . '+(d.getMonth()+1)+' . '+d.getFullYear();

/* Zeigt heutigen Tag */
var n = (d.getDate());
  /*
document.querySelectorAll('.tag'+n).forEach((p)=>{
     p.style.display='block';
})
 */
document.getElementById("year2").innerHTML = d.getFullYear();
such=document.getElementById('myInput');
such.addEventListener('keyup',function(){
  sucherg=such.value;
  document.querySelectorAll('.tag'+n).forEach((p)=>{
      html=p.textContent;
      inhalt=html.indexOf(sucherg);
      if(inhalt!=-1){
           p.style.background='yellow';
        p.style.display='block';// kam dazu
      }else{
           p.style.background='#ff5722'; 
                p.style.display='none';// kam dazu
      }
   });
})
</script>

Wie du siehst brauchst du da nur wennige Zeilen ändern
 
Werbung:
Hi Basti!

Super & Danke und wieder etwas gelernt.

Noch einmal anders erklärt.

Wenn das die Tageswerte für heute sind:

</li><li class="tag9"><a href="https://www.html.de" target="_blank"><b>London</b></a>
</li><li class="tag9"><a href="https://www.html.de" target="_blank"><b>Berlin</b></a>
</li><li class="tag9"><a href="https://www.html.de" target="_blank"><b>London</b></a>
</li><li class="tag9"><a href="https://www.html.de" target="_blank"><b>Paris</b></a>
</li><li class="tag9"><a href="https://www.html.de" target="_blank"><b>Berlin</b></a>
</li><li class="tag9"><a href="https://www.html.de" target="_blank"><b>London</b></a>
</li><li class="tag9"><a href="https://www.html.de" target="_blank"><b>Barcelona</b></a>
</li><li class="tag9"><a href="https://www.html.de" target="_blank"><b>Rom</b></a>
</li><li class="tag9"><a href="https://www.html.de" target="_blank"><b>Riga</b></a>
</li><li class="tag9"><a href="https://www.html.de" target="_blank"><b>London</b></a>

Dann sind nur diese 10 Werte heute sichtbar.

Wenn man nun in der Suchfunktion Lon oder Londin eingibt REDUZIERT sich diese Tagesliste in der Ansicht auf die 4 Treffer die Lon bzw. London enthalten. So wie in meiner Ursprungssuche auch.

Also am Anfang stehen da alle Treffer (nicht wie bei Deiner letzten Lösung, wo am Anfang gar nichts steht) und beim Suchen wird die Liste eingeschränkt (und nicht die Treffer markiert wie bei Deiner vorletzten Lösung).

Gruss

Markus
 
Danke für die Zusammenfassung.
Jetzt verstehe ich gar nix mehr.
Wenn du jetzt was ändern willst das es erst sichtbar ist und bei der suche ( wenn treffer ) verschwindet oder genau andersrum muß man eigentlich nur die display Werte ändern.
Ich verstehe gerade nicht was du meinst. Aber du sagtest ja das es in einer anderen Version anders wahr. Wenn es in der anderen Version richtig ist , dann kannst du da ja mal kucken was da anders wahr und den jetztigen Code ändern.

Wie auch immer du es jetzt meinst ( was ich gerade nicht kapiere ), ist es auf jedenfall nicht viel zu ändern.
Kuck dir das mal in den anderen Codes an wo es so ging wie du es wolltest und versuche dir das selber anzupassen.

Ich darf nicht mehr so viel helfen weil bekomme immer ansch.... , ist aber normal weil du sollst ja auch was lernen und nicht nur Copy & Paste .
Versuche es mal selber den Code anzupassen wie du es brauchst .
Falls du es nicht hin bekommen tust , dann schreib noch mal und zeige deine Versuche was du gemacht hast. Danach kann ich dir notfalls auch wieder helfen oder wer anders macht es wenn du es nicht hin bekommen solltest
 
Werbung:
Hi Basti!

Das ist aus meinem allerersten Post:

<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>

Wenn ich es richtig deute ich das die Such- und Einschränkfunktion.

Deine modifizierte Anpassung ist (gekürzt):

such=document.getElementById('myInput');
such.addEventListener('keyup',function(){
sucherg=such.value;
document.querySelectorAll('.tag'+n).forEach((p)=>{
html=p.textContent;
inhalt=html.indexOf(sucherg);
if(inhalt!=-1){
p.style.background='yellow';
}else{
p.style.background='#ff5722';
}
});
})
</script>

Ich habe schon versucht das Urspungsscript und Dein Script unter einen Hut zu bringen, aber leider vergeblich.

Diese Fehlversuche hier alle (auf einmal oder hintereinander) zu posten macht keinen Sinn.

Die Funktionalität der Suche sollte wie hier funktioniere: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_filter_table

Durch "al" schränkt man die 10 Treffer auf 3 Treffer ein.

So war meine Ursprungssuche.

Stell Dir vor das sind die 10 Tagestreffer und Du suchst nach "al".

Danke

Markus
 
Dein alter Code macht eigentlich das gleiche wie bei mir. Doch bei dein Code ist es egal ob du groß oder kleinschrift eingeben tust. Gibst du in der suche ein "LON" ein , findet er LON, lon, Lon, loN, lON, LOn usw...
Bei mir muß jeder Buchstabe mit klein und groß Schrift passen sonst findet er es nicht.

In mein Code mußt du nur dies toUpperCase() richtig anwenden , dann findet er auch alles egal ob groß und klein.

Ist das eigentlich so gewollt ? Oder meinst du was anderes ?
Weil mein Code macht ja genau das ,bis auf die groß und klein Schrift und du mußt anstatt es einzufärben die nicht Treffer auf display:none setzten
 
Hi Basti!

Bei Deinen Varianten ist entweder am Anfang nix und dann kann man suchen und hoffentlich was finden ODER am Anfang stehen da alle von heute und die Suche färbt die Treffer ein, wird nur NICHT reduziert.

Nur ich brauch am Anfang alle von heute und wenn ich suche und finde reduziert sich diese Liste auf die gefundenen, ohne Einfärbung. Wie bei meinem Ursprungscode bzw. wie bei https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_filter_table

Mit UpperCase() habe ich probiert aber wie immer wohl am falschen Ort platziert.

Ich weiß Du darfst mir eigentlich nicht mehr helfen, aber vielleicht sieht m.scatello diesen post gar nicht.
 
Werbung:
Ich weiß Du darfst mir eigentlich nicht mehr helfen, aber vielleicht sieht m.scatello diesen post gar nicht.
Doch darf ich schon, ist nur etwas schwer das zu erklären jetzt.
Der eigentliche sinn eines Forums ist es ja dir zu helfen , dir den richtigen weg zu zeigen damit du es alleine hinbekommen könntest ,ohne das man fertige Lösungen bekommt.

Du sagst zwar die ganze Zeit du willst es eigentlich nicht lernen, aber versuche es mal trotzdem alles zu verstehen damit du irgendwann mal zu deinen Chef sagen kannst "JA ICH KANN DAS" . Wenn du einmal das Grundprinzip verstehen tust kommt der Spaß an der Sache auch von alleine.

Soll in der Seite noch mehr rein oder nur das man sehen tut jetzt ??
Weil du hattest da ja auch 2 Fremd css Datein eingebunden die eigentlich für die paar Zeilen Code nicht notwendig sind. Da kannst du ach nur die Css Zeilen rausholen die man benötigt.
Sowas kann mal wichtig sein wenn du eine Webseite bauen tust .Sinnvoll wäre es das man nur das ladet was man auch brauch.

Habe das mit der Css auch gemacht weil mich das genervt hat. Kannst aber auch die Css Links im head stehen lassen wie es wahr , falls du davon doch noch was brauchen tust.

Du brachst eigentlich nur hier den script teil von <script> bis </script> raus zukopieren und bei dir rein zusetzten.
Wundere dich nicht der JS Teil ist jetzt etwas anders als vorher
 
Zuletzt bearbeitet:
Hi Basti!

Hoffe es geht Dir gut.

Hast Du eine codierte Lösung um noch ZUSÄTZLICH zum bisherigen Gesamtcode immer das erste Datum des nächsten Monats anzuzeigen?

Also heute ist der 20.09.19 und id=firstdaynextmonth wäre dann = 01.10.19.

Und wenn heute schon Weihnachten wäre dann 01.01.2020?

Danke und Gruss

Markus
 
Werbung:
Also den ganzen Septemper soll dann da 1.10 stehen ?
den ganzen Dezember dann 01.01 ?
usw...
wenn du doch das heutige Datum hast dann brauchst du doch nur plus 1 rechnen.
beim Monat Dezember eine if abfrage dazu , das Monat nicht +1 ist sondern -11 oder halt nee 1 ein setzen.

Verstehe gerade nicht wo das problem ist.
Könnte auch problem bei mir sein das ich es nicht verstehe
 
Hi ...

Ich habe doch oben über der Tabelle diesen update Button: <button>Last Update: <span id="date"></span></button>

Jetzt versuche ich schon seit gestern einen zweiten Button darunter zu setzen: <button>Gültig ab: <span id="firstdaynextmonth "></span></button>. Da soll immer der erste Tag des nächsten Monats stehen.

Im Script habe ich schon alles mögliche angepasst, mit dem Ergebnis das dann wieder in der Tabelle irgendwas nicht ging.

Deswegen meine Frage wie ich das Script anpassen muss damit oben ein weiteres Datum erscheint, das den ganzen aktuellen Monat immer den ersten Tag des nächsten Monats anzeigt.

<script>
var datum = new Date();
var Tag=datum.getDate();
var Monat=datum.getMonth();
var Jahr=datum.getFullYear();
document.getElementById('date').innerHTML = Tag+'.'+(Monat+1)+'.'+Jahr;
document.getElementById("year2").innerHTML = Jahr;
such=document.getElementById('myInput');
such.addEventListener('keyup',function(){
suchen(such.value)
})
function suchen(sucherg){
document.querySelectorAll('.tag'+Tag).forEach((p)=>{
inhalt=p.textContent.toUpperCase().indexOf(sucherg.toUpperCase());
if(inhalt!=-1){
// p.style.background='yellow'; //Die Zeilen wieder einfügen um die Ergebnisse farblich zu markieren
p.style.display='block';
}else{
// p.style.background='#ff5722'; //Die Zeilen wieder einfügen um die Ergebnisse farblich zu markieren
p.style.display='none';
}
});
}
suchen('');//die Zeile löschen dann werden erst Ergebnisse gezeigt wenn man suchen tut
</script>

Danke

Markus
 
Werbung:
Dann versuchen wir es halt ohne Fertige Lösung. ( Meine erklärung versteht sowieso keiner , ist bestimmt schwerer als den Code zu lernen :smile: )

1. Variable1 erstellen mit monat+2
1a Variable2 erstellen wo 01.01.'+Variable1; drinne steht
2. Eine if abfrage bauen wo if Variable1 gleich 13 ist {
da kommt 2a und 2b rein
2a. Variable3 erstellen wo fullyear +1 bekommt.
2b. Variabel2 bekommt jetzt neuen Wert = '01.01.'+variable3;
nach der if abfrage }
3. Button ansprechen und variable2 geben
Fertig

Man könnte es auch ohne die Variablen machen , doch das kann ich noch schwerer erklären
 
Zurück
Oben