3

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

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

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

我已经为符合 W3C 的浏览器实现了单个单元格以及选定单元格组的表格创建和样式修改，但我完全坚持使用 IE 实现。jQuery可以帮助我吗？我从未使用过它，但它似乎足够直观，掌握它所需的时间比弄清楚如何单独使用 IE DOM 做到这一点要少。

有三个基本的样式修改场景需要工作：

  1. 未通过 Ctrl/Cmd 单击显式选择但其中包含文本光标的表格单元格必须更改其背景颜色。单元格中可能包含格式化文本或其他父节点/子节点关系复杂器。
  2. 几个明确选择的表格单元格（Ctrl/Cmd 单击、Shift 选择或只是用鼠标“绘制”）必须更改其背景颜色。这必须适用于连续的矩形选择以及分散的单个选定单元格。
  3. 需要可以对“选定表”进行表级修改（边框宽度、颜色等）。也就是说，在编辑区域中有多个表格的情况下，将针对一个或多个具有光标焦点的表格（场景 1）或其中包含选定单元格（场景 2）的表格进行修改。

在 Firefox 中，我已经拥有适用于所有三个场景的代码。现在我需要一个跨浏览器的解决方案。有谁能够帮助我？

（之前在这里讨论过 IE 的选择和范围问题，但不是在 jQuery 的上下文中。我一眼就发现了这些：164147、218043、235411）

4

1 回答 1

4

如果我理解正确，您需要用于选择表格单元格和更改选择的属性（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（目前正在学习），但我希望这足以让你开始。）

于 2008-11-23T00:41:13.963 回答