randomtime
Sep 06, 2019
view1103
view6
0
Goto Top

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

GermanQuestionHTMLDevelopment
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="" target="_blank"><b>Administrative Coordinator - Southampton</b></a></li>  
<li><a href="" target="_blank"><b>Operations Manager - Brighton-and-Hove</b></a></li>  
<li><a href="" 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[i].getElementsByTagName("a");  
        if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";  
        } else {
            li[i].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 administrator.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
comment-contentCommentShareShare
Share on Facebook Share on Twitter Share on Reddit Share on Linkedin

Content-Key: 492399

Url: https://administrator.de/contentid/492399

Printed on: April 25, 2024 at 01:04 o'clock

6 Comments
Latest comment
Goto Top
Member: erikro
erikro Sep 07, 2019 at 10:41:58 (UTC)
Goto Top
Moin,

Zitat von @randomtime:
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.

Dann wäre das der Zeitpunkt, es zu lernen oder sich einen neues Betätigungsfeld zu suchen. face-wink

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

Dann suche Dir einen, der das kann, und bezahle ihn oder sie dafür. Der oder die wird Dir dann hoffentlich auch sagen, dass man dieses Problem serverseitig und nicht clientseitig lösen sollte. Oder ist das mal wieder eine dieser "praxisnahen" Hausaufgaben? face-wink

Liebe Grüße

Erik
Mitglied: 140913
140913 Sep 07, 2019 at 14:01:42 (UTC)
Goto Top
<!doctype html>
<html>
<head>
<meta charset="utf-8">  
<title>Demo</title>
</head>
<script type="text/javascript">  
function ShowEntries(){
	var items = document.getElementById('myUL').getElementsByTagName('li');  
	var today = new Date();
	var numDays = new Date(today.getFullYear(), today.getMonth()+1, 0).getDate();
	var itemsPerDay = Math.floor(items.length / numDays);
	var start = Math.floor((today.getDate() / numDays) * items.length)-itemsPerDay;
	for (i = start;i < (start + itemsPerDay);i++){
		items[i].className = "visible";  
	}
}
</script>
<style>
.hidden {display:none;}
.visible {display:block;}
</style>
<body onload="ShowEntries()">  
<ul id="myUL">  
  <li class="hidden"><a href="#"><b>Link1</b></a></li>  
  <li class="hidden"><a href="#"><b>Link2</b></a></li>  
  <li class="hidden"><a href="#"><b>Link3</b></a></li>  
  <li class="hidden"><a href="#"><b>Link4</b></a></li>  
  <li class="hidden"><a href="#"><b>Link5</b></a></li>  
  <li class="hidden"><a href="#"><b>Link6</b></a></li>  
  <li class="hidden"><a href="#"><b>Link7</b></a></li>  
  <li class="hidden"><a href="#"><b>Link8</b></a></li>  
  <li class="hidden"><a href="#"><b>Link9</b></a></li>  
  <li class="hidden"><a href="#"><b>Link10</b></a></li>  
  <li class="hidden"><a href="#"><b>Link11</b></a></li>  
  <li class="hidden"><a href="#"><b>Link12</b></a></li>  
  <li class="hidden"><a href="#"><b>Link13</b></a></li>  
  <li class="hidden"><a href="#"><b>Link14</b></a></li>  
  <li class="hidden"><a href="#"><b>Link15</b></a></li>  
  <li class="hidden"><a href="#"><b>Link16</b></a></li>  
  <li class="hidden"><a href="#"><b>Link17</b></a></li>  
  <li class="hidden"><a href="#"><b>Link18</b></a></li>  
  <li class="hidden"><a href="#"><b>Link19</b></a></li>  
  <li class="hidden"><a href="#"><b>Link20</b></a></li>  
  <li class="hidden"><a href="#"><b>Link21</b></a></li>  
  <li class="hidden"><a href="#"><b>Link22</b></a></li>  
  <li class="hidden"><a href="#"><b>Link23</b></a></li>  
  <li class="hidden"><a href="#"><b>Link24</b></a></li>  
  <li class="hidden"><a href="#"><b>Link25</b></a></li>  
  <li class="hidden"><a href="#"><b>Link26</b></a></li>  
  <li class="hidden"><a href="#"><b>Link27</b></a></li>  
  <li class="hidden"><a href="#"><b>Link28</b></a></li>  
  <li class="hidden"><a href="#"><b>Link29</b></a></li>  
  <li class="hidden"><a href="#"><b>Link30</b></a></li>  
  <li class="hidden"><a href="#"><b>Link31</b></a></li>  
  <li class="hidden"><a href="#"><b>Link32</b></a></li>  
  <li class="hidden"><a href="#"><b>Link33</b></a></li>  
  <li class="hidden"><a href="#"><b>Link34</b></a></li>  
  <li class="hidden"><a href="#"><b>Link35</b></a></li>  
  <li class="hidden"><a href="#"><b>Link36</b></a></li>  
  <li class="hidden"><a href="#"><b>Link37</b></a></li>  
  <li class="hidden"><a href="#"><b>Link38</b></a></li>  
  <li class="hidden"><a href="#"><b>Link39</b></a></li>  
  <li class="hidden"><a href="#"><b>Link40</b></a></li>  
  <li class="hidden"><a href="#"><b>Link41</b></a></li>  
  <li class="hidden"><a href="#"><b>Link42</b></a></li>  
  <li class="hidden"><a href="#"><b>Link43</b></a></li>  
  <li class="hidden"><a href="#"><b>Link44</b></a></li>  
  <li class="hidden"><a href="#"><b>Link45</b></a></li>  
  <li class="hidden"><a href="#"><b>Link46</b></a></li>  
  <li class="hidden"><a href="#"><b>Link47</b></a></li>  
  <li class="hidden"><a href="#"><b>Link48</b></a></li>  
  <li class="hidden"><a href="#"><b>Link49</b></a></li>  
  <li class="hidden"><a href="#"><b>Link50</b></a></li>  
  <li class="hidden"><a href="#"><b>Link51</b></a></li>  
  <li class="hidden"><a href="#"><b>Link52</b></a></li>  
  <li class="hidden"><a href="#"><b>Link53</b></a></li>  
  <li class="hidden"><a href="#"><b>Link54</b></a></li>  
  <li class="hidden"><a href="#"><b>Link55</b></a></li>  
  <li class="hidden"><a href="#"><b>Link56</b></a></li>  
  <li class="hidden"><a href="#"><b>Link57</b></a></li>  
  <li class="hidden"><a href="#"><b>Link58</b></a></li>  
  <li class="hidden"><a href="#"><b>Link59</b></a></li>  
  <li class="hidden"><a href="#"><b>Link60</b></a></li>  
</ul>
</body>
</html>
Member: randomtime
randomtime Sep 07, 2019 at 20:47:02 (UTC)
Goto Top
Hi psuser!

Super und Danke!

Nur leider harmonieren die Suchfunktion und die beiden Datumswerte nicht mit Deiner Lösung.

Hast Du eine Idee wie das alles zusammen funktioniert?

Liebe Grüsse

Markus
Mitglied: 140913
140913 Sep 08, 2019 updated at 06:17:36 (UTC)
Goto Top
Klar, aber dat is jetzt dein Problem, also setz dich hin und lerne. Wenn das beruflich deine Aufgabe ist solltest du nicht Arbeiten annehmen denen du nicht gewachsen bist, und dann auch noch dreist hingehen und sie von Foren erledigen lassen um dann falsche Tatsachen beim Arbeitgeber vorzutäuschen.
Member: randomtime
randomtime Sep 08, 2019 at 09:10:58 (UTC)
Goto Top
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?

Ich engagiere mich seit Jahren ehrenamtlich für ältere, kranke, meist sozial schwache Menschen. Denen helfe ich bei vielen alltäglichen Dingen, die meist einmalig vorkommen, wie z.B. das Ausfüllen behördlicher Formulare. Diese Menschen frage ich aber nie, warum sie sich nicht durchgoogeln oder diese komplizierten Antragsformulare nicht verstehen. Ich helfe den Menschen einfach in einer einmaligen Situation. Weil ich weiß wie es geht, es mir nur wenige Minuten meines Lebens kostet und die Menschen Hilfe brauchen.
Mitglied: 140913
140913 Sep 08, 2019 updated at 14:52:45 (UTC)
Goto Top
Zitat von @randomtime:

Erstens: Ich bin kein Programmierer, sondern arbeite im Marketing.
Schuster bleib bei deinen Leisten.
Zweitens: Hatte der sonst zuständige Kollege einen schweren Sportunfall und liegt im Krankenhaus.
Das tut mir leid, Sport ist eben auch manchmal Mord.
Drittens: Kam mein Chef auf die Idee das ich mich dieser Sache annehmen sollte. Da kann man schlecht nein sagen oder?
Öhm doch, ehrlich sein währt immer noch am längsten, oder lass dir eine Schulung als Programmierer bezahlen. Hier einfach irgendwelchen zusammenkopieren Code ohne weitere Erläuterung zu Posten ist ehrlich gesagt dreist.
Viel Spaß noch... nichts zu Danken. Kopfschüttel.
GermanQuestionHTMLDevelopment
Hotly discussed
gleixnerdCheck of ZFW Firewallgleixnerd - 5 CommentsjstrickerWireguard VPN on UDM Pro behind Fritzbox - Handshake did not completejstricker - 3 Comments