Geek asks and answers

Changing style attributes for selected table cells with jQuery?

I am creating a fairly simple HTML table creator / editor (based on iframe designMode) at work using direct manipulations with the DOM. This pain is obviously due to Internet Explorer.

When in designMode, the table inserted in the iframe editing area changes and can freely edit the contents of the cells. In Firefox, you can also add and remove rows and columns. I am currently focusing on editing border borders, foreground and background colors and other things that require the DOM to work.

The problem is the lack of proper DOM Selection / Range functionality in IE6 / 7. I cannot find the contained nodes for several cells selected at the same time. For a single cell, this is possible with parentElement, but for several selected cells, parentElement is a TR node that houses TD cells. I can’t understand how to extract node references only to TD cells inside this TR that were selected due to the lack of anchorNode, focusNode and various offsets that the W3C DOM provides.

I have already created table creation and style modification for individual cells, as well as a group of selected cells implemented for browsers compatible with W3C, but I completely hung in IE. Can jQuery help me? I have never used it, but it seems intuitive enough that it will take less time to learn than to figure out how to do this using the IE DOM.

There are three main style change scenarios that should work:

  • A table cell that was not explicitly selected using the Ctrl / Cmd click, but has a text cursor inside it, must have its own background color. A cell can have rich text or other complicators parentNode / childNode relationships.
  • (Ctrl/Cmd-clicked, Shift-selected "" ) . , .
  • ( , ..) " ". , , , ( 1), ( 2).

Firefox . - . - ?

( IE , jQuery. : 164147, 218043, 235411)

+3
1

, ( CSS) .

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 cells
    .css({borderColor: 'red', borderWidth: '1px'});
$('td.selected, th.selected, td.softclicked, th.softclicked').parents('table').children('td') // Change things on all of table cells, including tables of "softclicked" cells
    .css({borderColor: 'red', borderWidth: '1px'});

( Javascript jQuery ( ), , , .)

+4

More articles:


All Articles