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

我正在使用直接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)

解决方法:

如果我对您的理解得当,则需要选择表单元格以及更改选择内容的属性(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(目前正在学习),但我希望这足以使您入门.)

标签：dom,html-table,html,javascript,jquery
来源： https://codeday.me/bug/20191108/2004761.html