覆蓋div上td一行以上徘徊td

我有一張表，他由3列和n行組成。我想要做的是這個。當你將鼠標懸停在td上面的那個「陰影」的td上時，我試着用一個onmouseover和box-shadow來做這個，但是文本會出現在陰影之上。那麼我想，爲什麼不直接用透明背景製作一個div，然後把box shadow放在那裏呢？當我在螢火蟲中插入div時，效果很好。所以我繼續試圖讓jQuery動態創建div。他是我的js文件的相關代碼，可以用於盒子陰影。覆蓋div上td一行以上徘徊td

TL; DR：我需要創建DIV上的所有TD的的正上方一個你盤旋在做一個框陰影插圖

所有這一切都是在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）
拋出新的錯誤（「語法錯誤，無法識別的表情：」 + M sg）;

，它是在4267線的未壓縮的文件的jQuery

編輯：

想通了。出於某種原因，最終3部分是造成錯誤，所以我提出，在一個變量，名爲prevrow和更換結束-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');

但股利仍然沒有顯示出來。解決這個問題：如果有人有任何建議，我仍然會很感激他們。

來源

2012-08-23 Drew Landgrave

這裏是我會怎麼做：

您可以快速，輕鬆地通過保存這是一個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-03 07:11:53 kmb64

覆蓋div上td一行以上徘徊td

回答

相關問題