使用jQuery修改選定表格單元格的樣式屬性？

我正在使用直接DOM操作構建一個非常基本的HTML表格創建器/編輯器（基於designMode iframe）。這顯然是由於Internet Explorer造成的。使用jQuery修改選定表格單元格的樣式屬性？

在designMode中，插入到編輯區iframe的表可以調整大小，並且可以自由編輯單元格的內容。在Firefox中，行和列也可以添加和刪除。我目前專注於編輯邊框寬度，前景和背景顏色以及其他需要DOM工作的東西。

問題在於IE6/7中缺少正確的DOM選擇/範圍功能。我無法找到幾個同時選擇的單元格的包含節點。對於單個單元格，可以使用parentElement進行操作，但對於多個選定單元格，parentElement是容納TD單元格的TR節點。由於缺少anchorNode，focusNode和W3C DOM提供的各種偏移量，我無法弄清楚如何僅提取節點引用，以僅查找那些已選擇的TR內的TD單元。

我已經爲單個單元格以及W3C兼容瀏覽器實現的選定單元組創建了表格創建和樣式修改，但是我完全停留在IE實現中。 jQuery能幫助我嗎？我從來沒有使用過它，但它似乎足夠直觀，它將需要更少的時間來掌握，而不是單單用IE DOM來做到這一點。

有一些工作需要三個基本類型修改方案：

尚未使用Ctrl /加利福尼亞單擊已明確選擇，但它裏面的文本光標表的單元格，一定有它的背景顏色改變了。該單元格可能具有格式化文本或其他父節點/子節點關係複雜因素。
幾個明確選中的表格單元格（Ctrl/Cmd-clicked，Shift選中或者只是用鼠標「塗抹」）必須改變其背景顏色。這必須適用於連續的矩形選擇以及分散的單個選定單元格。
「選定表」的表級修改（邊框寬度，顏色等）需要可能。也就是說，對於編輯區域中的多個表格，修改將發生在一個或多個具有光標焦點（場景1）或具有選定單元格（場景2）的表格中。

在Firefox中，我已經有了適用於所有三種場景的代碼。現在我需要一個跨瀏覽器的解決方案。有誰能夠幫助我？

（IE與選擇和範圍的問題已經在這裏討論過，但不是在jQuery的背景下，我發現這些一目瞭然：164147，218043，235411）

來源

2008-11-20 JK Laiho

如果我理解你正確，你想選擇表格單元格的一般代碼，以及爲選擇更改屬性（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-23 00:41:13 strager

這幾乎是我一直在尋找。謝謝。不幸的是，我被禁止使用jQuery，但最終在FCKeditor中找到了（並且剝離）了一個純粹的DOM解決方案。我一定會在未來的項目中使用這個。 – 2008-12-01 11:24:35

使用jQuery修改選定表格單元格的樣式屬性？

回答

相關問題