Ändern der Stilattribute ausgewählter Tabellenzellen mit jQuery?

Question

Ich baue eine ziemlich einfache HTML-Tabelle Creator/Editor (basierend auf einem designMode iframe) bei der Arbeit, mit direkten DOM-Manipulation. Es ist ein Schmerz, offensichtlich aufgrund von Internet Explorer.

Im DesignModus ist eine in den iframe des Bearbeitungsbereichs eingefügte Tabelle in der Größe veränderbar und der Inhalt der Zellen kann frei bearbeitet werden. In Firefox können auch Zeilen und Spalten hinzugefügt und entfernt werden. Ich konzentriere mich derzeit auf die Bearbeitung von Randbreiten, Vorder- und Hintergrundfarben und andere Dinge, die DOM-Arbeit erfordern.

Das Problem ist das Fehlen der richtigen DOM Selection/Range-Funktionalität im IE6/7. Ich bin nicht in der Lage, die enthaltenen Knoten für mehrere gleichzeitig ausgewählte Zellen zu finden. Für eine einzelne Zelle ist es machbar mit parentElement, aber für mehrere ausgewählte Zellen, parentElement ist der TR-Knoten, der die TD-Zellen beherbergt. Ich kann nicht herausfinden, wie man Knotenverweise auf nur die TD-Zellen innerhalb dieser TR, die ausgewählt wurden, aufgrund des Fehlens von anchorNode, focusNode und die verschiedenen Offsets, die W3C DOM bietet zu extrahieren.

Ich habe bereits die Tabellenerstellung und die Stiländerung für einzelne Zellen sowie Gruppen von ausgewählten Zellen für W3C-konforme Browser implementiert, aber ich bin völlig mit der IE-Implementierung stecken. Könnte jQuery mir helfen? Ich habe es nie verwendet, aber es scheint intuitiv genug, dass es weniger Zeit zu meistern, als es wird, um herauszufinden, wie man dies mit dem IE DOM allein tun.

Es gibt drei grundlegende Szenarien zur Änderung des Stils, die funktionieren müssen:

1. Eine Tabellenzelle, die nicht explizit mit Strg/Cmd angeklickt wurde, in der sich aber der Textcursor befindet, muss eine andere Hintergrundfarbe erhalten. Die Zelle kann formatierten Text oder andere ParentNode/ChildNode-Beziehungen enthalten.
2. Bei mehreren explizit ausgewählten Tabellenzellen (Strg/Cmd-geklickt, Shift-ausgewählt oder einfach mit der Maus "übermalt") muss die Hintergrundfarbe geändert werden. Dies muss sowohl für zusammenhängende rechteckige Auswahlen als auch für verstreute, einzelne ausgewählte Zellen funktionieren.
3. Änderungen auf Tabellenebene (Randbreite, Farbe usw.) für die "ausgewählte Tabelle" müssen möglich sein. Das heißt, bei mehreren Tabellen im Bearbeitungsbereich erfolgt die Änderung für eine oder mehrere Tabellen, die entweder den Cursor-Fokus haben (Szenario 1) oder in denen Zellen markiert sind (Szenario 2).

In Firefox habe ich den Code für alle drei Szenarien bereits zum Laufen gebracht. Jetzt brauche ich eine browserübergreifende Lösung. Kann mir jemand helfen?

(Die Probleme des IE mit Auswahlen und Bereichen wurden hier schon einmal diskutiert, aber nicht im Zusammenhang mit jQuery. Ich habe diese auf einen Blick gefunden: 164147 , 218043 , 235411 )

Answer 1

Wenn ich Sie richtig verstehe, möchten Sie den allgemeinen Code für die Auswahl von Tabellenzellen und die Änderung von Eigenschaften (CSS-Attribute) für die Auswahl.

In jQuery können Sie dies leicht tun.

var curTableCell = null; // "Softclicked" - not part of the selection (1)

// We call this in the click event below.  You'd probably want this for keyboard events as well (for arrow key nav, etc.)
function softclick(element) {
    $(curTableCell).removeClass('softclicked');
    curTableCell = element;
    $(element).addClass('softclicked');
}

$('td, th').click(function() {
    if(keyHeld) { // Dunno how you do this (I'm not good at Javascript)
        $(this).toggleClass('selected'); // Explicitly added/removed to/from selection (2)
    } else {
        softclick(this);
    }
});

/* When you want to do something on selection: */
$('td.selected, th.selected').css({borderColor: 'red', borderWidth: '1px'});

/* When you want to do something on selected tables (3): */
$('td.selected, th.selected').parents('table')
    .css({borderColor: 'red', borderWidth: '1px'});
$('td.selected, th.selected').parents('table').children('td') // Change things on all of table's cells
    .css({borderColor: 'red', borderWidth: '1px'});
$('td.selected, th.selected, td.softclicked, th.softclicked').parents('table').children('td') // Change things on all of table's cells, including tables of "softclicked" cells
    .css({borderColor: 'red', borderWidth: '1px'});

(Ich kenne mich mit Javascript oder jQuery nicht so gut aus (ich lerne es gerade), aber ich hoffe, das reicht für den Anfang).