3

Webアプリにテーブルがあり、ユーザーがテーブル内の行をクリックしてデータ要素を選択できるようにするイベントハンドラーを実装しました。選択した要素を視覚的に強調するために、境界線を付けます。新しい行が選択されたら、選択したクラス（境界線）を古い要素から削除して、新しい要素に追加します。

イベントリスナーコードは正しく機能しているようです。chromeの開発ツールを使用して、クラスが古い要素から削除され、新しく選択された要素に追加されていることを確認しました。ただし、removeClass（）が呼び出された後、ブラウザは境界線を正しく削除していません。

クロム（18.0.1025.151）でテストすると、新しく選択された要素は境界線付きで表示され、以前に選択された要素は引き続き境界線の一部を表示します（境界線の下部と右側の部分は引き続き描画されます）。FF 11でテストすると、同様の描画バグが発生します。Firefoxでは、新しく選択した行は、上部が表示されない境界線の左/右/下の部分のみを描画します。再描画が発生するイベント（ブラウザウィンドウのサイズ変更など）により、境界線描画の問題が修正されます。

誰かが問題の原因への情報/リンクを持っていますか？さらに重要なことに、ユーザーが新しい行を選択した後に実装できる回避策はありますか？

追加/削除されるCSSクラス

.uiSelectedLHPlanRow { border: 1px solid purple; }

HTML

<table id='lhPlansTable' class='uiLHPlansTable'>
</table>

（テーブルの行は動的に追加されます）TR形式：

'<tr id=\'' + GENERATED ID + '\' class=\'uiLHPlanTableRow\'><td class=\'uiLHPlanDriverTableCell\'>' + GENERATED DATA1  + '</td><td>' + GENERATED DATA2 + '</td></tr>'

イベントハンドラー

$('#lhPlansTable').on('click', 'tr.uiLHPlanTableRow', function () {

    ... flow control ...

    $('.uiSelectedLHPlanRow').removeClass('uiSelectedLHPlanRow');
    $(this).addClass('uiSelectedLHPlanRow');


    // TODO: WORKAROUND FOR DRAWING BUG ??
}
4

1 に答える 1

2

の問題のようborder-collapse;です。明示的に設定border-collapse:separate;すると、うまく機能するようです（ただし、スタイルを調整する必要がある場合があります）。に設定するborder-collapse:collapse;と、問題が再発します。

例： http： //jsfiddle.net/T2saA/3/

CSS

tr.uiSelectedLHPlanRow > td { 
    border-top: 1px solid purple; 
    border-bottom: 1px solid purple; 
}

table.uiLHPlansTable{
    border-collapse:separate;
}​
于 2012-04-09T16:42:48.663 に答える