• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] Tabellenlayout - Inhalte an bestimmter Stelle platzieren

I

inception

New member
Möglicherweise ist meine Frage ziemlich lächerlich, aber ich komme echt nicht darauf wie ich das realisieren kann.

Ich habe eine Tabelle mit 5 Spalten und mehreren Zeilen.
Alle paar Tage soll ein neuer Inhalt hinzukommen der in der Obersten Zeile ganz links dargestellt werden soll.
Die anderen Inhalte sollen dann jeweils um eine Spalte nach rechts rücken. Der Inhalt der zuvor Oben rechts stand, rutsch dann in die Zeile darunter an die linke Position usw.
Unten in der letzten Zeile können freie Felder sein, aber in der oberen, ersten Zeile sollen immer alle 5 Spalten gefüllt sein.
Ich hoffe das ich mein Vorhaben verständlich erklärt habe.
Wie kann ich das hinbekommen ohne alles von Hand verschieben zu müssen?
Javascript müsste doch der beste Weg sein oder?

Danke,
Mark
 
Hmmm, wo kommen die Inhalte denn her? Kann derjenige diese nicht einfach in die richtige Stelle schreiben? Ich verstehe den Sachverhalt nicht. Ansonsten findet man bei Google alles, z.B. mit diesem Suchbegriff: js insert cell

Ich würde gern konkreter antworten aber das kann ich nur, wenn ich das verstanden habe, was du da hast. :)
 
Ist der Inhalt wirklich tabellarisch? Wenn nicht, solltest du sowieso keine <table> verwenden...
Code: 
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css">
#display {
	width: 250px;
}
.item {
	display: inline-block;
	width: 50px;
	background-color: lightblue;
}
.item:nth-child(odd) {
	background-color: lightgreen;
}
</style>
</head>
<body>
<button id="addItem">add item</button>
<div id="display"><span class="item">a5</span><span class="item">a4</span><span class="item">a3</span><span class="item">a2</span><span class="item">a1</span></div>
<script type="text/javascript">
document.getElementById("addItem").addEventListener("click", function(){
	this.counter = (this.counter || 0) + 1;
	var item = document.createElement("span");
	item.className = "item";
	item.innerHTML = "b" + this.counter;
	var display = document.getElementById("display");
	display.insertBefore(item, display.firstChild);
}, true);
</script>
</body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben