Modification des attributs de style des cellules de tableau sélectionnées avec jQuery?

Question

Je suis en train de construire un éditeur/éditeur de table HTML assez basique (basé sur un iframe designMode) au travail, en utilisant la manipulation DOM directe. C'est une douleur, évidemment due à Internet Explorer.

En mode design, une table insérée dans la zone d'édition iframe est redimensionnable et le contenu des cellules peut être édité librement. Dans Firefox, les lignes et les colonnes peuvent également être ajoutées et supprimées. Je suis actuellement concentré sur l'édition des largeurs de bordure, des couleurs de premier plan et d'arrière-plan et d'autres choses qui nécessitent un travail DOM.

Le problème est l'absence de fonctionnalité de sélection/plage DOM appropriée dans IE6/7. Je suis incapable de trouver les nœuds contenant pour plusieurs cellules sélectionnées simultanément. Pour une seule cellule, c'est possible avec parentElement, mais pour plusieurs cellules sélectionnées, parentElement est le noeud TR qui contient les cellules TD. Je n'arrive pas à comprendre comment extraire les références de noeuds aux seules cellules TD à l'intérieur de ce TR qui ont été sélectionnées, en raison de l'absence de anchorNode, de focusNode et des divers offsets fournis par le DOM W3C.

J'ai déjà la création de table et la modification de style pour des cellules individuelles ainsi que des groupes de cellules sélectionnées implémentées pour des navigateurs compatibles W3C, mais je suis complètement bloqué avec l'implémentation IE. Est-ce que jQuery pourrait m'aider? Je ne l'ai jamais utilisé, mais il semble assez intuitif que cela prendra moins de temps à maîtriser que de savoir comment faire cela avec IE DOM seul.

Il existe trois scénarios de modification de style de base qui doivent travailler:

1. Une cellule de table qui n'a pas été explicitement sélectionné avec Ctrl/Cmd-clic, mais il a le curseur de texte à l'intérieur, doit avoir son arrière-plan couleur changée. La cellule peut contenir du texte formaté ou d'autres complicités parentNode/childNode-relationship.
2. Plusieurs cellules de tableau explicitement sélectionnées (Ctrl/Cmd-cliqué, Maj-sélectionné ou simplement "peint avec") doivent avoir leurs couleurs d'arrière-plan modifiées. Cela doit fonctionner pour des sélections rectangulaires contiguës aussi bien que pour des cellules sélectionnées individuelles dispersées.
3. Des modifications au niveau de la table (largeur de la bordure, couleur, etc.) pour la "table sélectionnée" doivent être possibles. C'est-à-dire que dans le cas de plusieurs tables dans la zone d'édition, la modification aura lieu pour une ou plusieurs tables qui ont le focus du curseur (scénario 1) ou qui ont des cellules sélectionnées (scénario 2).

Dans Firefox, j'ai déjà le code pour les trois scénarios de travail. Maintenant, j'ai besoin d'une solution multi-navigateur. Quelqu'un peut-il m'aider?

(problèmes d'IE avec des sélections et les gammes ont été discutées ici avant, mais pas dans le contexte de jQuery Je les ai trouvées un coup d'oeil. 164147, 218043, 235411)

Answer 1

Si je vous comprends bien, vous voulez le code général de sélection des cellules de tableau et les propriétés changeantes (attributs CSS) pour la sélection.

Vous pouvez le faire facilement dans jQuery.

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'}); 

(je ne suis pas trop bon à Javascript ou jQuery (je apprends au moment), mais j'espère que cela est suffisant pour vous aider à démarrer.)