JavaScript Tabelle mit Daten aus externer Datei

Madycrazy · 26. Januar 2014

Hallo,

scheitere leider bei folgendem Versuch.

Code:

function createtable(){
     
var tab = new Array(1.1,2.2,3.3,4.4,5.5,6.6,7.7,8.8);

var t = document.createElement("table");
var tb = document.createElement("tbody");

tr = document.createElement("tr");
for(x=0; x<4; x++)
{
td = document.createElement("td");
string = document.createTextNode((tab[x]));
td.appendChild(string);							// string in td
tr.appendChild(td)								// td in tr
}
tb.appendChild(tr);								// tr in body
	
tr = document.createElement("tr");
for(x=4; x<8; x++)
{
td = document.createElement("td");
string = document.createTextNode((tab[x]));
td.appendChild(string);
tr.appendChild(td)
}
tb.appendChild(tr);
	
t.appendChild(tb);
t.setAttribute("ID", 'table');
t.setAttribute("class", 'test');
t.setAttribute("cellspacing", '1');
t.setAttribute("cellpadding", '1');
t.setAttribute("border", '1');
document.getElementById('showtable').appendChild(t);
}

Das Script ansich funktioniert, nur möchte ich dass ein Array aus einer externen Datei geladen wird, welches ab und zu neue Daten enthält.

Mithilfe von jQuery

Code:

var refresh = setInterval(
function ()
{
$('#content').load('content.html');
}, 100000);

und

Code:

<div id="content"></div>

rufe ich die externe Datei auf, wie kann ich dort nun die Variable auslesen, sie an createtable übergeben und erstellen lassen ?

Code:

<script type="text/javascript">
function getData() {
var tab = new Array(5.4,5.3,5.6,4.5,3.8,7.6,5.4,5.3,5.6,4.5,3.8,7.6,5.4,5.3,5.6,4.5,3.8,7.6,5.4,5.3,5.6,4.5,3.8,7.6);

createtable();
}
</script>

geht schonmal nicht.

Hab mit Firebug versucht den Code zu debuggen, aber irgendwie kann ich da nichtmal step für step durchklick0rn.

CapFuture · 26. Januar 2014

Hast du die Scriptdatei, in der die createtable() Funktion definitiert wird, auch auf der Seite eingebunden?

SymA · 26. Januar 2014

Meine Heransgehensweise wäre in etwa so:
- createTable: Initialisiert deine Tabelle mit vordefinierten Standardwerten
- getData: holt in regelmäßigen Zeitintervallen neue Daten aus einer anderen Datei und filtert diese nach gewünschten Inhalten
- insertData: fügt neugeladene Daten an die bereits existierende Tabelle hinzu.

Madycrazy · 26. Januar 2014

huch, so schnelle Antworten, gar nicht mit gerechnet.

Also ich habe zwei Html Dateien, eine mit createtable und refresh, in der ich über einen div container die content.html stets neu lade.

Die zweite Datei enthällt eigentlich nur den geposteten Inhalt, und die html tags für head und body.

Wenn ich die createtable mit

Code:

<body onload="createtable()">

und über einen Div-Container

Code:

<div id="showtable"></div>

dann wird, sofern ich das richtig verstanden habe, solange gewartet bis die Seite geladen ist und dann die Funktion aufgerufen und an der stelle des Div-Containers platziert.

Mir fehlt halt jetzt die Syntax die beiden Dateien zu verknüpfen und dann auszugeben, onload kann ich ja dann nicht mehr verwenden.

Ich bin davon ausgegangen dass ich content aufrufe, und durch den Funktionsaufruf createtable ausgeführt wird, da sie ja bereits geladen ist.

Hast du die Scriptdatei, in der die createtable() Funktion definitiert wird, auch auf der Seite eingebunden?

öhhm, ich dachte ein

Code:

<link href="url"/>

brauch ich nicht, da ich ja direkt die Datei aufrufe.

- getData: holt in regelmäßigen Zeitintervallen neue Daten aus einer anderen Datei und filtert diese nach gewünschten Inhalten
- insertData: fügt neugeladene Daten an die bereits existierende Tabelle hinzu.

eigentlich will ich die ganze Tabelle überschreiben, nichts anfügen.

SymA · 26. Januar 2014

Mal was gänzlich anderes:
Wenn du schon jQuery benutzt, wieso dann auch nicht auch korrekt benutzen und auch die Tabelle mit jQuery zu erzeugen, wenn du die Bibliothek bereits geladen hast.
Ein Stichwort wäre da Immediately-invoked function expression (IIFE)
Wenn du den Inhalt überschreiben willst, kannst du einfach die Tabelleninhalte mit dem neuen Inhalt überschreiben - jedoch würde ich sicherheitshalber vorher den alten Inhalt entfernen.

Madycrazy · 26. Januar 2014

Hallo, danke für die Antwort.

Grundsätzlich hast du natürlich recht, ich sollte mich für eins entscheiden, aber ich denke man hat schon mitbekommen das ich auf diesem Gebiet nicht wirklich fit bin. Da liegen mir andere Sprachen besser.

Eigentlich hatte ich nach einem Weg gefragt wie man von a nach b kommt, die Antwort das c doch schöner ist bringt mich jetzt zwar nicht weiter aber ich habs mal versucht ;-)

Code:

<script>
	$(document).ready(function(){
	var tab = new Array(1.1,2.2,3.3,4.4)
	
	function createtable() {
	$('#dynamictable').append('<table border="2px"></table>');
	var table = $('#dynamictable').children();
	table.append("<tr><td border='1px'>" + tab[0] + "</td><td>" + tab[1] + "</td></tr>");
	table.append("<tr><td border='1px'>" + tab[2] + "</td><td>" + tab[3] + "</td></tr>");
	}
	createtable();
	
	var auto_refresh = setInterval(
	function ()
	{
	$('#content').load('content.html');
	}, 10000);
	
	});
    </script>

aufgerufen über :

Code:

<div id="dynamictable"></div><div id="content"></div>

und die zweite Datei enthällt

Code:

<script type="text/javascript">
var tab = new Array(1.1,2.2,3.3,4.4,5.5,6.6,7.7,8.8);
function createtable() {
	$('#dynamictable').append('<table border="2px"></table>');
	var table = $('#dynamictable').children();
	table.append("<tr><td border='1px'>" + tab[4] + "</td><td>" + tab[5] + "</td></tr>");
	table.append("<tr><td border='1px'>" + tab[6] + "</td><td>" + tab[7] + "</td></tr>");
	}
createtable();
</script>

Zumindest kommt es der Richtung nahe was ich eigentlich möchte : Also die erste 2x2 Tabelle ersetzen.
Entferne ich den ersten Div-Container passiert gar nichts mehr. Entferne ich den zweiten bleibt die Tabelle so stehen.

Ergänzung (26. Januar 2014)

ok, ich glaub ich habs nun

mit

Code:

empty()

scheints nun zu funktionieren, zumindest einmalig, ob das im zyklus klappt, geht erst bei dynamischen werten. Meld mich wenn ichs getestet habe.

Suche

JavaScript Tabelle mit Daten aus externer Datei

Madycrazy

Cadet 4th Year

CapFuture

Lt. Commander

SymA

Captain

Madycrazy

Cadet 4th Year

SymA

Captain

Madycrazy

Cadet 4th Year

Ähnliche Themen