Estoy construyendo una bastante básico tabla HTML de su creador/editor (basado en un designMode iframe) en el trabajo, el uso directo de la manipulación del árbol DOM. Se trata de un dolor que, obviamente, debido a que Internet Explorer.

Cuando en designMode, una tabla inserta en el área de edición iframe es de tamaño variable y el contenido de las celdas pueden editarse libremente. En Firefox, filas y columnas también se pueden añadir y quitar. Actualmente estoy centrado en la edición de anchos de borde, en primer plano y colores de fondo y otras cosas que requieren DOM trabajo.

El problema es la falta de una adecuada DOM Selección/Rango de funcionalidad en IE6/7. Yo soy incapaz de encontrar el que contiene los nodos de varios simultáneamente las celdas seleccionadas. Para una sola celda es factible con parentElement, pero por varias celdas seleccionadas, parentElement es el TR nodo que aloja el TD de las células. No puedo entender cómo extraer el nodo referencias sólo a aquellos TD células en el interior de ese TR, que han sido seleccionados, debido a la falta de anchorNode, focusNode y los diferentes desplazamientos que W3C DOM proporciona.

Yo ya tengo la tabla de la creación y la modificación de la forma de las células individuales, así como grupos de celdas seleccionadas implementado por el W3C compatible con los navegadores, pero estoy completamente atascado con el IE aplicación. Podría jQuery que me ayude? Nunca la he utilizado, pero parece lo suficientemente intuitivo que va a tomar menos tiempo para dominar de lo que será la de averiguar cómo hacer esto con el IE DOM solo.

Hay tres básicos de las modificaciones de estilo de los escenarios que se necesita para trabajar:

  1. Una celda de la tabla que no ha sido explícitamente seleccionado con la tecla Ctrl/Cmd-clic, pero tiene el cursor de texto en su interior, debe tener su color de fondo cambia. La célula puede tener formato de texto o de otros parentNode/childNode-relación complicators en ella.
  2. Varios explícitamente seleccionado las celdas de la tabla (Ctrl/Cmd-clic, Shift-seleccionados o sólo «pintados» con el ratón) debe tener sus colores de fondo cambiado. Este tiene que trabajar para contiguos selecciones rectangulares, así como para esparcidos, la selección individual de las células.
  3. Tabla de nivel de modificaciones (ancho de borde, color, etc.) para la «tabla seleccionada» la necesidad de ser posible. Es decir, en el caso de varias mesas en el área de edición, la modificación se llevará a cabo por una o más tablas que han cursor (escenario 1) o celdas seleccionadas en ellos (escenario 2).

En Firefox, ya tengo el código para los tres escenarios de trabajo. Ahora necesito un cross-browser solución. ¿Alguien puede ayudarme?

(Es decir, los problemas con las selecciones y los rangos se han discutido aquí antes, pero no en el contexto de jQuery. He encontrado estos en un vistazo: Cien sesenta y cuatro mil cien cuarenta y siete, Doscientos dieciocho mil cuarenta y tres, Doscientos treinta y cinco mil cuatrocientos once)

InformationsquelleAutor JK Laiho | 2008-11-20

1 Comentario

  1. 4

    Si lo entiendo correctamente, usted desea que el código general para la selección de las celdas de la tabla, y cambiar las propiedades (atributos CSS) para la selección.

    Usted puede hacer esto fácilmente en 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'});

    (No soy demasiado bueno en Javascript o jQuery (estoy aprendiendo en este momento), pero espero que esto sea suficiente para empezar.)

    • Eso es bastante más de lo que yo estaba buscando. Gracias. Por desgracia, creo que se prohibió el uso de jQuery para esto, pero al final encontramos (y estafado) un puro DOM solución en FCKeditor. Definitivamente voy a hacer uso de este en los proyectos de futuro.

Dejar respuesta

Please enter your comment!
Please enter your name here