Question

我有一张表，其中包含3列和n行。我想要做的就是这个。当你将鼠标悬停在td上方所有上面的td将被“阴影”时，我尝试用一个onmouseover和box-shadow做这个，但是文本会出现在阴影上方。那么我想，为什么不只是制作一个透明背景的div并将盒子阴影放在那里？当我在萤火虫中插入div时效果很好。所以我继续尝试使用jQuery动态创建div。他是我的js文件中的相关代码，适用于盒子阴影。

TL; DR：我需要在你盘旋的那个正上方的所有td上创建div并执行box-shadow插入

所有这一切都在td mousover

    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）
抛出新错误（“语法错误，无法识别的表达式：”+ msg）;

并且它位于未压缩的jQuery文件的第4267行

编辑：

想出来。由于某种原因，结束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仍然没有出现。关于那个问题：如果有人有任何建议，我仍然会感激他们。

Answer 1

我将如何做到这一点：

您可以将其另存为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>

在td上方的一行上叠加div

1 个答案: