0

3列とn行で構成されるテーブルがあります。私がやろうとしているのはこれです。td にカーソルを合わせると、上のすべての td が「影付き」になり、onmouseover と box-shadow だけでこれを実行しようとしましたが、テキストが影の上に表示されます。それで、背景が透明なdivを作成して、そこにボックスの影を入れてみませんか？firebug に div を挿入するとうまくいきます。そこで、jQuery を使用して div を動的に作成しようとしました。彼は、ボックスのシャドーイングのために機能した私のjsファイルからの関連コードです。

TL;DR: ホバリングしている td の真上にあるすべての td に div を作成し、ボックス シャドウ インセットを作成する必要があります

これはすべて td マウスオーバーにあります

    var col , row, t=$(this);
    col = t.index();
    row= t.closest('tr').index();
    var end = 3 * row + col -1;

  while(end > 0){

      var i=1;
      var tdLeftPosition = $('td:eq('+ end-3 +')').offset().left;
      var tdTopPosition = $('td:eq('+ end-3 +')').offset().top;
      var tdWidth = $('td:eq(2)').css('width');
      var tdHeight = $('td:eq(2)').css('height');

      $("<div class = 'shadow-box' id='divTdOverlay"+i+"' style='height:"+ tdHeight+"px;width:"+ tdWidth +"px;top:"+ tdTopPosition +"px;left:"+ tdLeftPosition +"px;' />");
//This is the box shadowing that I have comented out
//    $('td').slice(end-3, end-2).stop().animate({boxShadow: '0 0 170px #000000 inset'}, 'fast');
      i++;
      // used to get the td's position in the array one row up 
      end -= 3;
  }

したがって、自分のサイトでマウスオーバーを試みると、このエラーが発生します

構文エラー、認識できない式: NaN)
throw new Error("構文エラー、認識できない式: " +msg );

圧縮されていないjQueryファイルの4267行目にあります

編集：

理解した。何らかの理由で end-3 の部分がエラーの原因だったので、それを prevrow という変数に入れ、end-3 をそれに置き換えました

 var i=1;
 var prevrow = end-3;
 var tdLeftPosition =  $('td:eq('+ prevrow +')').offset().left;
 var tdTopPosition = $('td:eq('+ prevrow +')').offset().top;
 var tdWidth = $('td:eq(2)').css('width');
 var tdHeight = $('td:eq(2)').css('height');

しかし、divはまだ表示されていません。その問題について：誰かが何か提案があれば、私はまだ感謝しています。

4

1 に答える 1

0

これが私がそれを行う方法です：

これを HTML ページとして保存し、ブラウザで開くことで、すばやく簡単にテストできます。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js""></script>
    <style>
        td {
            padding: 5px;
        }
        .shadow-box {
            padding: 5px;
            display: none;
            position: absolute;
            background: rgba(0, 0, 0, 0.7); 
            z-index: 10;

        }
    </style>
    <script>
        var getRow = function(td) {
            var row = td.parent().parent().children().index(td.parent());
            return row;
        }
        var getCol = function(td) {
            var col = $(td).parent().children().index(td);
            return col;
        }

        $(function () {         

            $('td').each(function () {

                var $this = $(this);
                var pos = $this.position();
                var width = $this.width();
                var height = $this.height();

                $('body').append("<div class='shadow-box "+ getRow($this)  +getCol($this) +"' style='width:" + width + "px; height: " + height + "px; top: " + pos.top + "px; left: " + pos.left + "px;'></div>");       

            });

            $('.shadow-box').hover(function () {
                $(this).hide();
            });


            $('td').hover(function () {

                var col = getCol($(this));
                var row = getRow($(this));

                shadeCells(col, row);
            });

            function shadeCells(col, row) {

                $('td').each(function () {

                    var $this = $(this);
                    var thisRow = getRow($this);
                    var thisCol = getCol($this);

                    if ((thisCol == col) && (thisRow < row)) {

                        $('.' + thisRow + thisCol).show();
                    }

                    else{
                        $('.' + thisRow + thisCol).hide();
                    }

                });

            }
            $('table').mouseleave(function () {
                $('.shadow-box').hide();
            });
        });
    </script>
</head>
<body>

    <table>
        <tr>
            <td>Contents</td>   
            <td>Contents</td>
            <td>Contents</td>
        </tr>
        <tr>
            <td>Contents</td>   
            <td>Contents</td>
            <td>Contents</td>
        </tr>
        <tr>
            <td>Contents</td>   
            <td>Contents</td>
            <td>Contents</td>
        </tr>
        <tr>
            <td>Contents</td>   
            <td>Contents</td>
            <td>Contents</td>
        </tr>
        <tr>
            <td>Contents</td>   
            <td>Contents</td>
            <td>Contents</td>
        </tr>
        <tr>
            <td>Contents</td>   
            <td>Contents</td>
            <td>Contents</td>
        </tr>
        <tr>
            <td>Contents</td>   
            <td>Contents</td>
            <td>Contents</td>
        </tr>
    </table>

</body>
</html>
于 2012-09-03T07:11:53.473 に答える