Archivlink: javarea.de Forum > JavaScript > Dynamische Tabelle - jetzt wird's richtig kompliziert
Vollständigen Link anzeigen: javarea.de Forum > JavaScript > Dynamische Tabelle - jetzt wird's richtig kompliziert

Pages: [1] 2 3 4 ... nächste » ... Letzte »
geschrieben von Eppi am 03.05.2006 - 14:10
Hallo - hier bin ich wieder

Mein nächstes Ziel ist der Aufbau einer dynamischen Tabelle ala activewidgets oder zimbra. da ich im js-proggen leider noch nciht soooo fit bin würde ich mich sehr freuen, wenn ihr mir bei bestimmten problemen unter die arme greifen könntet. als erstes steht für mich die frage, ob ich die tabelle aus tabellenelementen, oder mit divs und spands zusammenschrauben soll.

tabellenelemente scheinen mir beim ersten blick einfacher. auf den zweitern blick allerdings nicht mehr, da ich über ajax tabellenzeilen nachladen möchte. diese lassen sich über eine <div>-konstruktion wesentlich einfacher in die bestehende tabelle integrieren als über <tr>.
<table>
<div>
<tr>
<td></td>
</tr>
</div>
</table
ist ja leider nicht erlaubt.

als nächstes möchte ich wie bei der zimbra-variante (funktioniert dort nu im ie) den inhalt, sobald er zu lang ist mit punkten abkürzen und wenn man auf das element klickt soll der ganze inhalt angezeigt werden. dies könnt ihr recht einfach testen, indem ihr eine spalte zusammenschiebt. jetzt wird der inhalt mit punkten abgekürzt. auch hier ist für mcih die frage, ist dies mit span oder mit tr elementen einfacher zu lösen?

so, jetzt bin ich mal ganz gespannt auf eure antworten! vielleicht hat ja sogar einer lust bei diesem projekt mitzumachen - ich würde mich darüber sehr freuen.

gruß, paul

geschrieben von okley am 03.05.2006 - 21:17
Hallo,
Deine HTML-Struktur ist nicht gültig. deshalb geht sie wohl auch nur im IE .

Wenn du dir eine dynamische Griddarstellung basteln möchtest, würde ich das vorzugsweise schon mit einer html-tabelle als grundlage implementieren. so hast du es einfach mit den zeilenübergreifenden spaltenbreiten. du kannst innerhalb des td elements immernoch div und spans einbinden, etwa um das box-model zu umgehen, oder events abzufangen.

den inhalt mit punkten abzukürzen ..., da gibt es bestimmt mehrer möglichkeiten. einen ansatz hab ich aber leider auch grad keinen im kopf ;/

geschrieben von Matneu am 03.05.2006 - 21:50
Zitat
 Original geschrieben von okley am 03.05.2006 - 21:17
den inhalt mit punkten abzukürzen ..., da gibt es bestimmt mehrer möglichkeiten. einen ansatz hab ich aber leider auch grad keinen im kopf ;/

Falls nur richtige Browser genutzt werden kann man per CSS (Stichwort :hover) auch ganz schicke Dinge machen. Leider ist der IE kein Browser, so dass man hier ggf. auf Javascript zurückgreifen muss.
HTML:
HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 

<div class="parent">
    Hier drüberfahren...
    <div class="child">
        ...dann wird das hier angezeigt
    </div>
</div>


CSS:
HTML-Quelltext
1: 
2: 
3: 

.parent {position:relative;}
.parent>.child {display:hidden;}
.parent:hover>.child {display:inline; position:absolute; top:1em; left:1em;}


So far...
Matthias

geschrieben von Eppi am 11.05.2006 - 18:37
um mit dem problem hier mal vorran zu kommen habe ich eine js-funktion gefunden mit der ich direkt styles bearbeiten kann. dies funktioniert bei mir leider nur im ie und im firefox. habt ihr eine idee was ich ändern muß damit es z.b. auch unter opera läuft? hier die funktion:

HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 

function changerule(selector,rule) {
	var ss = document.styleSheets[document.styleSheets.length-1];
	var rules = (window.external) ? ss.rules : ss.cssRules;
	for(i=0;i<rules.length;i++) {
		if(rules[i].selectorText==selector) {
			rules[i].style.cssText=rule;
			return;
		}
	}

	if(window.external) ss.addRule(selector,rule);
         else {
		var i=ss.cssRules.length;
		ss.insertRule(selector+'{'+rule+'}',i);
		ss.cssRules[i].style.cssText=rule;
	}
}
</script>
<a href="#" onmouseover="changerule('#c1', 'width: 20px')" onmouseout="changerule('#c1', 'width: 200px')">Test</a>


gruß, paul

geschrieben von Eppi am 11.05.2006 - 18:41
mein hauptptoblem ist, das ich eine tabelle erstellen möchte bei der ich später zeilen nachladen kann. soll heißen das ich z.b. zeile 101 bis 199 nachlade, sobald ich auf die zeile hundert klicke. wenn ich nochmal auf die zeile hundert klicke, möchte ich die neu hinzugefügten zeilen wieder ausblenden.
um mir eine schleife (bei der ich alle zeilen der reihe nach abklappern muß) zu sparen, möchte ich den 100 zeilen einfach eine klasse zuordnen und diese klasse dann direkt auf display:none setzen. genau das könnte ich mit der funktion weiter oben bewerkstelligen - nur leider funktioniert diese nicht bei allen browsern.

gruß, paul

geschrieben von Matneu am 11.05.2006 - 22:36
Zitat
 Original geschrieben von Eppi am 11.05.2006 - 18:41
mein hauptptoblem ist, das ich eine tabelle erstellen möchte bei der ich später zeilen nachladen kann. soll heißen das ich z.b. zeile 101 bis 199 nachlade, sobald ich auf die zeile hundert klicke. wenn ich nochmal auf die zeile hundert klicke, möchte ich die neu hinzugefügten zeilen wieder ausblenden.
um mir eine schleife (bei der ich alle zeilen der reihe nach abklappern muß) zu sparen, möchte ich den 100 zeilen einfach eine klasse zuordnen und diese klasse dann direkt auf display:none setzen. genau das könnte ich mit der funktion weiter oben bewerkstelligen - nur leider funktioniert diese nicht bei allen browsern.

Ich mache genau das gleiche auch unter Opera mit (aus dem Kopf):
HTML-Quelltext
1: 
2: 

var element = document.getElementByTagName['blub']; // Hier kann man auch getElementById oder sonstwas nehmen, ggf. muss man nach der Klasse noch weiter selektieren
element.style.display = 'none';


Edit: Gerade meinen Code gefunden:
HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 

// Per Javascript alle Elemente der Klasse "nojs" verbergen
for(i = 0; i < document.getElementsByTagName('div').length; ++i) {
	var classname = document.getElementsByTagName('div')[i].className;
	var ergebnis = classname.search(/nojs/);
	if(ergebnis != -1) {
		document.getElementsByTagName('div')[i].style.display = 'none';
	}
}


So far...
Matthias

geschrieben von Eppi am 11.05.2006 - 22:46
ja, nur muß ich hierbei alle hundert einträge mit einer schleife durchgehen. das dauert mir leider zu lange. wenn ich den style selber bearbeite geht es einfach wesentlich schneller. verstehst du, was ich meine?

gruß, paul

geschrieben von Matneu am 12.05.2006 - 00:24
Zitat
 Original geschrieben von Eppi am 11.05.2006 - 22:46
ja, nur muß ich hierbei alle hundert einträge mit einer schleife durchgehen. das dauert mir leider zu lange. wenn ich den style selber bearbeite geht es einfach wesentlich schneller. verstehst du, was ich meine?

Am Verständnis hapert's bei mir nicht ;)

Ich gehe - wie Du an meinem Code siehst - alle DIVs durch und davon habe ich nicht wenige. Alleine durch das Layout gibt es dort einige. Allerdings ist das kein wirkliches Problem, man merkt es kaum (Client ist ein Pentium M mit 1,3 GHz). Glaube also nicht, dass es zu einem wirklichen Problem werden kann.

So far...
Matthias

geschrieben von Eppi am 12.05.2006 - 11:04
Ja bei Dir vielleicht nicht. Bei mir könnten es unter umständen allerdings mehrere Hundert oder Tausend sein. Das Hauptproblem ist nun, dass ich nicht weiß was der Benutzer für einen Rechner hat. Da ich nun schon eine Lösung für den IE und Firefox gefunden habe gibt es vielleicht auch eine Variante für den Opera. Wenn Du sagst: Nein, die gibt es nicht ist das was anderes. Deine vorgeschlagene Variante kannte ich schon vorher und werde ich im Notfall wohl auch nehmen müssen. Mir geht es aber erstmal hauptsächlich darum eine Lösung für das direkte bearbeiten der Styles zu finden. Trotzdem schonmal Danke, für die bisherige Hilfe!

gruß, paul

geschrieben von René am 12.05.2006 - 11:30
Hallo Eppi,

warum nicht so bzw. ist ungetestet?

PHP-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 

<?
function changerule(selector, rule, wert)
{
    with (document)
        eval('getElementById(\'' + selector + '\').style.' + rule) = wert;
}
?>

geschrieben von Eppi am 12.05.2006 - 11:32
na weil ich hier nur den wert direkt für das eine element ändere, jedoch nicht in der style-datei. schau dir mal meine version an, was die genau tut. ich greife direkt auf die stylesheets zu und ändere diese.

gruß, paul

geschrieben von René am 12.05.2006 - 11:59
... hast du das von mir wenigstens mal probiert?

So wie ich deinen Funktionsaufruf verstehe verwendest du IDs und diese sollte man ja nur einmal im HTML-Code verwenden/vergeben.

geschrieben von Eppi am 12.05.2006 - 12:02
ja entschuldigung, das war nur ein beispiel. es werden natürlich keine ids verwendet.

gruß, paul

geschrieben von Matneu am 12.05.2006 - 13:56
Zitat
 Original geschrieben von Eppi am 12.05.2006 - 11:04
Ja bei Dir vielleicht nicht.

Hast Du so ein Beispiel mal online? Würde gerne mal testen, wie lange es mit diesen hundert Elementen dauert.

So far...
Matthias

geschrieben von Eppi am 12.05.2006 - 14:01
im moment gerade nicht, kann ich aber gerne erstellen. melde mich dann wieder.

gruß, paul


Powered by: JBB v.2.0.4 Copyright ©2000-2006, www.javarea.de.