Question

我正在使用直接DOM操作构建一个非常基本的HTML表创建器/编辑器（基于designMode iframe）。这很痛苦，显然是因为Internet Explorer。

在designMode中，插入编辑区iframe的表格可以调整大小，并且可以自由编辑单元格的内容。在Firefox中，还可以添加和删除行和列。我目前专注于编辑边框宽度，前景色和背景色以及其他需要DOM工作的东西。

问题是IE6 / 7中缺少适当的DOM选择/范围功能。我无法找到几个同时选中的单元格的包含节点。对于单个单元，它可以使用parentElement，但对于多个选定的单元，parentElement是容纳TD单元的TR节点。由于缺少anchorNode，focusNode和W3C DOM提供的各种偏移，我无法弄清楚如何仅将节点引用提取到TR中已选择的那些TD单元。

我已经为单个单元格以及为符合W3C标准的浏览器实现的所选单元组创建了表格和样式修改，但我完全坚持使用IE实现。 jQuery可以帮助我吗？我从来没有使用它，但它看起来足够直观，它将花费更少的时间来掌握，而不是单独使用IE DOM来解决这个问题。

有三种基本的样式修改方案需要工作：

未使用Ctrl / Cmd单击明确选择但在其中包含文本光标的表格单元格必须更改其背景颜色。单元格中可能包含格式化文本或其他parentNode / childNode-relationship复合器。
几个明确选择的表格单元格（Ctrl / Cmd单击，Shift选择或仅用鼠标“涂抹”）必须更改其背景颜色。这必须适用于连续的矩形选择以及分散的，单独选择的单元格。
“选定表”的表级修改（边框宽度，颜色等）需要是可能的。也就是说，在编辑区域中有多个表的情况下，将对一个或多个具有光标焦点（方案1）或在其中选择了单元格的方格（方案2）进行修改。

在Firefox中，我已经拥有了所有三种方案的代码。现在我需要一个跨浏览器的解决方案。有人能帮助我吗？

（IE的选择和范围问题之前已经讨论过了，但是在jQuery的上下文中没有讨论过。我发现这些问题一目了然：164147，218043，235411）< / p>

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（我现在正在学习），但我希望这足以让你开始。）

使用jQuery修改所选表格单元格的样式属性？

1 个答案: