Изменить атрибуты стиля выбранных ячеек таблицы с помощью jQuery?

Question

Я создаю довольно простой создатель / редактор таблиц HTML (на основе iframe designMode) на работе, используя прямое манипулирование DOM. Это боль, очевидно, из-за Internet Explorer.

В режиме designMode таблица, вставленная в область редактирования iframe, имеет изменяемый размер, и содержимое ячеек можно свободно редактировать. В Firefox строки и столбцы также можно добавлять и удалять. В настоящее время я сосредоточен на редактировании ширины границ, цветов переднего плана и фона и других вещей, которые требуют работы DOM.

Проблема в том, что в IE6 / 7 отсутствует надлежащая функция выбора / диапазона DOM. Я не могу найти содержащие узлы для нескольких одновременно выбранных ячеек. Для отдельной ячейки это возможно с parentElement, но для нескольких выбранных ячеек parentElement является узлом TR, в котором находятся ячейки TD. Я не могу понять, как извлечь ссылки на узлы только для тех ячеек TD внутри этого TR, которые были выбраны, из-за отсутствия anchorNode, focusNode и различных смещений, которые обеспечивает W3C DOM.

Я уже получил создание таблиц и модификацию стиля для отдельных ячеек, а также групп выбранных ячеек, реализованных для браузеров, совместимых с W3C, но я полностью застрял в реализации IE. Может ли jQuery помочь мне? Я никогда не использовал его, но он кажется достаточно интуитивным, чтобы освоить его быстрее, чем понять, как это сделать только с IE DOM.

Существует три основных сценария изменения стиля, которые должны работать:

1. В ячейке таблицы, которая не была явно выбрана с помощью нажатия Ctrl / Cmd, но внутри которой находится текстовый курсор, должен быть изменен цвет фона. В ячейке может быть отформатированный текст или другие осложнения отношений parentNode / childNode.
2. Для нескольких явно выбранных ячеек таблицы (нажатие Ctrl / Cmd, выделение Shift или просто «закрашивание» мышью) должны быть изменены цвета фона. Это должно работать как для смежных прямоугольных выделений, так и для отдельных выделенных ячеек.
3. Должны быть возможны модификации на уровне таблицы (ширина границы, цвет и т. Д.) Для «выбранной таблицы». То есть, в случае нескольких таблиц в области редактирования, модификация будет выполняться для одной или нескольких таблиц, которые либо имеют фокус курсора (сценарий 1), либо в них выделены ячейки (сценарий 2).

В Firefox у меня уже есть код для всех трех работающих сценариев. Теперь мне нужно кросс-браузерное решение. Кто-нибудь может мне помочь?

(проблемы IE с выборами и диапазонами обсуждались здесь ранее, но не в контексте jQuery. Я нашел их с первого взгляда: 164147 , 218043 , 235411 )

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

(Я не слишком хорош в Javascript или jQuery (сейчас учусь), но надеюсь, этого достаточно, чтобы вы начали.)