Наложение div на td на одну строку выше hovered td

У меня есть таблица, в которой он состоит из 3 столбцов и n строк. Я пытаюсь это сделать. Когда вы наведете над td все вышеперечисленные td, которые будут «заштрихованы», я попытался сделать это только с помощью onmouseover и box-shadow, но текст появится над тенью. Итак, тогда я подумал: почему бы просто не сделать div с прозрачным фоном и наложить туда тень? Когда я вставляю div в firebug, он отлично работает. Поэтому я перешел к попытке создать динамическое создание div с помощью jQuery. Он - соответствующий код из моего js-файла, который работал на коробку.Наложение div на td на одну строку выше hovered td

TL; DR: Мне нужно создать Div на всех ТД непосредственно над одним вашим зависший над и сделать коробчатого теневую врезка

Все это на тд 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; 
    }

Так когда я пытаюсь MouseOver на моем сайте я получаю эту ошибку

ошибки синтаксиса, непризнанное выражение: NaN)
певда Error ("ошибка синтаксиса, непризнанное выражение:" + м sg);

и это в строке 4267 из несжатого JQuery файл

EDIT:

фигурной его. По какой-то причине в конце 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 на одну строку выше hovered td

ответ

Смежные вопросы