3

直接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 だけでこれを行う方法を理解するよりも習得するのに時間がかからないほど十分に直感的です。

動作する必要がある 3 つの基本的なスタイル変更シナリオがあります。

  1. Ctrl/Cmd を押しながらクリックして明示的に選択されていないが、その中にテキスト カーソルがあるテーブル セルは、背景色を変更する必要があります。セルには、書式設定されたテキストまたはその他の親ノード/子ノード関係複雑子が含まれる場合があります。
  2. 明示的に選択されたいくつかのテーブル セル (Ctrl/Cmd クリック、Shift 選択、またはマウスで単に「塗りつぶされた」) の背景色を変更する必要があります。これは、連続した長方形の選択と、散らばって選択された個々のセルに対して機能する必要があります。
  3. 「選択したテーブル」のテーブル レベルの変更 (境界線の幅、色など) が可能である必要があります。つまり、編集領域に複数の表がある場合、カーソルがフォーカスされている (シナリオ 1) か、セルが選択されている (シナリオ 2) 1 つ以上の表に対して変更が行われます。

Firefox では、3 つのシナリオすべてのコードが既に動作しています。今、クロスブラウザー ソリューションが必要です。誰でも私を助けることができますか？

(選択と範囲に関する 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 に答える