[ Idee ] dynamische Tabelle mit Visualisierung des Punkteabstandes
Hallo Ethan
Ich habe mal ein bisschen mit der JS Console herumgespielt und ein nettes Tabellenfeature gebaut, so dass die Zeilenabstände den Punkteabständen entsprechen. Damit sieht man auf einen Blick die Positionen mit Abständen, sowie die Gruppenbildung ( Spitzengruppe, Mittelfeld, Verfolgergruppe, Absteiger, ... )
Du kannst es ja mal testen. Einfach den folgenden Quellcode in die JS Console im Browser reinhauen. Da kein jQuery geladen ist, musste ich jQuery per Console nachladen. Das dauert aber irgendwie zu lange bzw. braucht fast immer zwei Anläufe .Deshalb den Quellcode einfach zweil mal in der JS Console ausführen.
var jq = document.createElement(’script’);
jq.src = ”https://code.jquery.com/jquery-3.6.0.min.js”;
setTimeout(
function(){
document.getElementsByTagName(’head’)[0].appendChild(jq);
jQuery.noConflict();
},1000
)
setTimeout(
function(){
$(’table.gabBigTable tbody tr’).css(’transition’, ’height 1s linear’);
dynaTable();
},2000
);
function dynaTable(reset=false){
var p=-1;
$.each( $(’table.gabBigTable tbody tr’),
function(i,v){
var tr=$(v).children();
if( tr[0].localName != ’td’ ) return;
if( tr.length == 6 || tr.length == 7 ){
var pi=tr.length - 1;
//$(v).css(’height’,’11px’);
if( p == -1 ) p=tr[pi].innerHTML;
if( reset ) {
$(v).css(’height’,’26px’ );
} else {
$(v).css(’height’,((p-tr[pi].innerHTML+1)*11)+’px’ );
}
$(tr).css(’vertical-align’,’bottom’);
p=tr[pi].innerHTML;
}
}
);
}
Wenn du jQuery mit lädst, dann braucht es nur noch die Funktion dynaTable() und der Rest oberhalb entfällt.
Wenn du den Code ordnen oder minimalisieren möchtest, gibt es ja tools im Netz dazu.
mit dynaTable(true) kannst du die Tabelle wieder zurücksetzen
Lustige Spielerei.
Man erkennt, dass Rasenschach eindeutig zu stark geworden ist! ;)
Oh, dann würde ich das natürlich auch gerne sehen können, habe aber leider von Eurem Computer-Chinesisch keinen blassen Schimmer. 😜😬🤷🏼
Ach du hast das schon als chinesisch erkannt, dann bist du ja schon tiefer in die Materie eingetaucht als ich.🙈😬
das sieht dann so aus
https://ibb.co/8Y5djbw
Aktuell ist eine Schrittweite von 11px je Punkt(unterschied) gesetzt.
Um mögliches Scrollen und zu große Abstände zu vermeiden könnte man den Wert besser auf 8px setzen.
So ich war jetzt mal selbst aktiv und habe eine FireFox - Erweiterung geschrieben, die soeben vom FireFox-Team erfolgreich signiert wurde.
Informationen zur Erweiterung findet ihr unter
https://git.fairkom.net/ultrasoccer/ultrasoccer-addons/-/blob/main/README.md
Die Erweiterung zum Installieren im FireFox-Browser findet ihr unter.
https://git.fairkom.net/ultrasoccer/ultrasoccer-addons/-/blob/release/firefox/ultrasoccer_dynatable-1.0-fx.xpi
Die Erweiterung ist natürlich nur für Desktop-Nutzer konzipiert. Aufm Smartphone ergibt es ohnehin keinen Sinn, bedingt der kleinen Displaygröße.
Der Beitrag wurde nachträglich editiert.
Ist das für die Visualisierung von oben, oder was ist da alles dabei?
Da hast dir aber Mühe gegeben! :)
genau, das ist diese Visualisierung.