7

マウスが列の上に置かれたときに境界線を変更できるように、テーブルのスタイルを設定する方法を検討しています。

ここに画像の説明を入力

マウスが列の上にあるときに、境界線の色を変更してその列を強調表示したい:

ここに画像の説明を入力

強調するために、jQuery ライブラリで次の JavaScript コードを使用しています。

$('td').hover(function() {
    var t = parseInt($(this).index()) + 1;
    $('td:nth-child(' + t + ')').addClass('highlighted');
},
function() {
    var t = parseInt($(this).index()) + 1;
    $('td:nth-child(' + t + ')').removeClass('highlighted');
});

次の CSS を使用します。

.highlighted {
    border-top: 2px solid black;
    border-right: 2px solid black;
    border-left: 2px solid black;
}

この JSFiddle でこれがどのように機能するかを確認できます: http://jsfiddle.net/sCFjj/1/ これは、一番左の列にカーソルを合わせたときにのみ機能します。それ以外の場合は、右側の列 (および上部) が強調表示されますが、左側の垂直列は強調表示されません。左の縦列を表示させる方法はありますか?

理想的には、最下位の行を無視する効果が欲しいのですが、jQuery の選択から行を除外する方法がわかりません。

この前の質問に厳密に基づいて試みました。

4

4 に答える 4

7

リンク: jsFiddle . また、前の列のborder-rightに追加すると、必要なものが得られます。列の右枠が次の列の左枠を超えていると思います。

JavaScript:

$('td').hover(function() {
    var t = parseInt($(this).index()) + 1;
    $('td:nth-child(' + t + ')').addClass('highlighted');

    if(t>1){
        var t1 = t -1;
        //alert("T:" + t + "<br/> T1:" + t1);
        $('td:nth-child(' + t1 + ')').addClass('highlightedPrev');
    }
},
function() {
    var t = parseInt($(this).index()) + 1;
    $('td:nth-child(' + t + ')').removeClass('highlighted ');
        if(t>1){
         var t1 = t -1;
         $('td:nth-child(' + t1 + ')').removeClass('highlightedPrev');
    }
});​

CSS:

.highlighted {
    border: 2px solid black;
}
.highlightedPrev {
    border-right: 2px solid black;
}

問題を解決したことを願っています。

于 2012-11-21T15:47:20.903 に答える
1

すべての行が彼の「右の隣人」の上にあるように見えるので、それらは互いに重なっています。その理由をより深く調査するか、次の方法で修正できます。

$('td').hover(function() {
    var t = parseInt($(this).index()) + 1;
    $('td:nth-child(' + t + ')').addClass('highlighted');
    $('td:nth-child(' + (t-1) + ')').addClass('highlighted_only_right');
},
function() {
    var t = parseInt($(this).index()) + 1;
    $('td:nth-child(' + t + ')').removeClass('highlighted');
    $('td:nth-child(' + (t-1) + ')').removeClass('highlighted_only_right');
});

もっと良いものを見つけたら教えてください;）

于 2012-11-21T15:48:27.110 に答える
1

表の枠がつぶれる

あなたが直面している問題は、テーブルがデフォルトで境界線を折りたたむことです。したがって、テーブル自体に追加のスタイルを設定する必要があります。

border-collapse: separate;

これは、兄弟の境界線が 2 ピクセルになるため、境界線には 1 ピクセルの境界線が必要であることも意味します。

追加のスタイリングにより、内側のものを削除し、外側のみを強調表示することができます。

于 2012-11-21T15:49:22.287 に答える
0

これを試してください：http://jsfiddle.net/sCFjj/27/

Highlight_left を追加し、JavaScript を少し単純化しました (すべてのセルのハイライト クラスを削除しました)。

$('td').hover(function() {
    var t = parseInt($(this).index());
    $('tr td').removeClass('highlighted');
    $('tr td').removeClass('highlighted_left');
    $('tr td:nth-child(' + (t+1) + ')').addClass('highlighted');
    $('tr td:nth-child(' + (t) + ')').addClass('highlighted_left');
});​

Highlight_left の場所:

.highlighted_left{
    border-right: 2px solid black;
}
于 2012-11-21T15:49:43.753 に答える