Maus Hover mit mehreren td rowspan

Question

Ich habe eine Tabelle mit mehreren td rowspan. Beim Maus-Hover sollte die gesamte alphabetische Reihe in roter Farbe erscheinen. Wenn wir beispielsweise die Maus auf einem beliebigen Alphabetwert halten, sollte der gesamte Alphabetbereich rot erscheinen. Gleicher Fall für Zahlen auch.

Hatte einige jQuery, um dies zu erreichen, konnte aber nicht die gesamte Reihe von Alphabet oder Zahlen in der gleichen Farbe bekommen. Versuchen Sie diese: http://jsfiddle.net/y3q2bs85/6/

HTML-Code:

<table> 
    <tbody> 
     <tr> 
      <td rowspan="3">Alphabet</td> 
      <td rowspan="2">a</td> 
      <td>b</td> 
      <td>c</td> 
     </tr> 
     <tr> 
      <td>d</td> 
      <td>e</td> 
     </tr> 
     <tr> 
      <td>f</td> 
      <td>g</td> 
      <td>h</td> 
     </tr> 
     <tr> 
      <td rowspan="3">Number</td> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
     </tr> 
     <tr> 
      <td>4</td> 
      <td>5</td> 
      <td>6</td> 
     </tr> 
     <tr> 
      <td>7</td> 
      <td>8</td> 
      <td>9</td> 
     </tr> 
    </tbody> 
</table> 

CSS-Code:

body { 
    padding: 50px; 
} 
table { 
    width: 100%; 
    border-collapse: collapse; 
} 
td, th { 
    padding: 20px; 
    border: 1px solid black; 
} 
.hover { 
    background: red; 
} 

jQuery-Code:

$("td").hover(function() { 
    $el = $(this); 
    $el.parent().addClass("hover"); 

    if ($el.parent().has('td[rowspan]').length == 0) 

    $el 
     .parent() 
     .prevAll('tr:has(td[rowspan]):first') 
     .find('td[rowspan]') 
     .addClass("hover"); 
}, function() { 

    $el 
    .parent() 
    .removeClass("hover") 
    .prevAll('tr:has(td[rowspan]):first') 
    .find('td[rowspan]') 
    .removeClass("hover"); 

}); 

Wie können wir dieses Problem lösen?

Answer 1

BEARBEITEN: Es wurde eine Möglichkeit hinzugefügt, um den Anfang jedes Blocks zu finden.

EDIT 2 - Haben die harte Arbeit vorne über dieses Denken wieder, ist es besser, nur zu Beginn auszuarbeiten, die Zeilen in jedem Block sind und speichern diese Liste mit jeder Zeile, z.B. Jede alphabetische Zeile speichert einen Verweis auf ein Array, das die Zeilen 1-4 enthält. Wenn Sie also den Mauszeiger bewegen, müssen Sie nur das Array der Zeilen in der übergeordneten Zeile speichern und die Klasse auf diese anwenden.

Durch Überprüfen der maximalen Zeilenspanne in der obersten Zeile des Blocks sind Sie nicht darauf beschränkt, nur die erste Zelle zu überprüfen. Im aktualisierten Code habe ich Alphabet in die Mitte verschoben, um dies zu demonstrieren und ein paar andere Blöcke hinzuzufügen, um einzeilige Blöcke zu demonstrieren.

function findBlocks(theTable) { 
 
    if ($(theTable).data('hasblockrows') == null) { 
 
     console.log('findBlocks'); // to prove we only run this once 
 

 
     // we will loop through the rows but skip the ones not in a block 
 
     var rows = $(theTable).find('tr'); 
 
     for (var i = 0; i < rows.length;) { 
 

 
      var firstRow = rows[i]; 
 

 
      // find max rowspan in this row - this represents the size of the block 
 
      var maxRowspan = 1; 
 
      $(firstRow).find('td').each(function() { 
 
       var attr = parseInt($(this).attr('rowspan') || '1', 10) 
 
       if (attr > maxRowspan) maxRowspan = attr; 
 
      }); 
 

 
      // set to the index in rows we want to go up to 
 
      maxRowspan += i; 
 

 
      // build up an array and store with each row in this block 
 
      // this is still memory-efficient, as we are just storing a pointer to the same array 
 
      // ... which is also nice becuase we can build the array up in the same loop 
 
      var blockRows = []; 
 
      for (; i < maxRowspan; i++) { 
 
       $(rows[i]).data('blockrows', blockRows); 
 
       blockRows.push(rows[i]); 
 
      } 
 

 
      // i is now the start of the next block 
 
     } 
 

 
     // set data against table so we know it has been inited (for if we call it in the hover event) 
 
     $(theTable).data('hasblockrows', 1); 
 
    } 
 
} 
 

 
$("td").hover(function() { 
 
    $el = $(this); 
 
    //findBlocks($el.closest('table')); // you can call it here or onload as below 
 
    $.each($el.parent().data('blockrows'), function() { 
 
     $(this).find('td').addClass('hover'); 
 
    }); 
 
}, function() { 
 
    $el = $(this); 
 
    $.each($el.parent().data('blockrows'), function() { 
 
     $(this).find('td').removeClass('hover'); 
 
    }); 
 
}); 
 

 
findBlocks($('table'));

body { 
 
    padding: 50px; 
 
} 
 
table { 
 
    width: 100%; 
 
    border-collapse: collapse; 
 
} 
 
td, th { 
 
    padding: 20px; 
 
    border: 1px solid black; 
 
} 
 
.hover { 
 
    background: red; 
 
}

<table> 
 
    <tbody> 
 
     <tr> 
 
      <td>Symbols</td> 
 
      <td>+</td> 
 
      <td>-</td> 
 
      <td>*</td> 
 
     </tr> 
 
     <tr> 
 
      <td rowspan="2">a</td> 
 
      <td>b</td> 
 
      <td rowspan="4">Alphabet</td> 
 
      <td>c</td> 
 
     </tr> 
 
     <tr> 
 
      <td>d</td> 
 
      <td>e</td> 
 
     </tr> 
 
     <tr> 
 
      <td rowspan="2">f</td> 
 
      <td>g</td> 
 
      <td>h</td> 
 
     </tr> 
 
     <tr> 
 
      <td>i</td> 
 
      <td>j</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Bitwise</td> 
 
      <td>&amp;</td> 
 
      <td>|</td> 
 
      <td>^</td> 
 
     </tr> 
 
     <tr> 
 
      <td rowspan="3">Number</td> 
 
      <td>1</td> 
 
      <td>2</td> 
 
      <td>3</td> 
 
     </tr> 
 
     <tr> 
 
      <td>4</td> 
 
      <td>5</td> 
 
      <td>6</td> 
 
     </tr> 
 
     <tr> 
 
      <td>7</td> 
 
      <td>8</td> 
 
      <td>9</td> 
 
     </tr> 
 
    </tbody> 
 
</table> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

Answer 2

Ihre Tabellenstruktur ist unregelmäßig, ist es so sehr schwer, einen Wähler zu finden, die die visuelle „Zeile“ wählt, wie es unterschiedliche Zeilen erstreckt. Eine Lösung besteht darin, die Zellen mit der Hand zu färben, werfen Sie einen Blick auf http://jsfiddle.net/2szxsfcs/2/

Grundsätzlich markieren Sie die Zeilen, die gemeint sind, gefärbt werden zusammen mit der gleichen ID, dann jquery verwenden Sie Farbe/uncolor alle zugehörigen TR:

<table> 
    <tbody> 
     <tr class="fullrow row1" data-id="1"> 
      <td rowspan="3">Alphabet</td> 
      <td rowspan="2">a</td> 
      <td>b</td> 
      <td>c</td> 
     </tr> 
     <tr class="fullrow row1" data-id="1"> 
      <td>d</td> 
      <td>e</td>   
     </tr> 
     <tr class="fullrow row1" data-id="1"> 
      <td>f</td> 
      <td>g</td> 
      <td>h</td> 
     </tr> 
     <tr class="fullrow row2" data-id="2"> 
      <td rowspan="3">Number</td> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
     </tr> 
     <tr class="fullrow row2" data-id="2"> 
      <td>4</td> 
      <td>5</td> 
      <td>6</td> 
     </tr> 
     <tr class="fullrow row2" data-id="2"> 
      <td>7</td> 
      <td>8</td> 
      <td>9</td> 
     </tr> 
    </tbody> 
</table> 

und

$(".fullrow") 
    .hover(function() { 
     var id=this.getAttribute("data-id"); 
     // on hover, we get an "id", and all tr's that have class "row<id>" are the ones to color 
     $(".row"+id).addClass("hovering"); 
    }) 
    .on ("blur mouseleave", function() { 
     var id=this.getAttribute("data-id"); 
     $(".row"+id).removeClass("hovering"); 
    }); 

und

.hovering { background-color:red; } 

Answer 3

Versuchen Sie, diese

 $(function() { 
     $("td").hover(function() { 
      $el = $(this); 
      $el.parent().addClass("hover"); 
      var tdIndex = $('tr').index($el.parent()); 
      if ($el.parent().has('td[rowspan]').length == 0) { 
       $el.parent().prevAll('tr:has(td[rowspan]):first') 
         .find('td[rowspan]').filter(function() { 
          return checkRowSpan(this, tdIndex); 
         }).addClass("hover"); 
      } 
     }, function() { 
      $el.parent() 
    .removeClass("hover") 
    .prevAll('tr:has(td[rowspan]):first') 
    .find('td[rowspan]') 
    .removeClass("hover"); 

     }); 
    }); 
    function checkRowSpan(element, pIndex) { 
     var rowSpan = parseInt($(element).attr('rowspan')); 
     var cIndex = $('tr').index($(element).parent()); 
     return rowSpan >= pIndex + 1 || (cIndex + rowSpan) > pIndex; 
    } 

Fiddler here

Answer 4

mir die <div> Art und Weise Lassen Sie versuchen. Dies löst mehrere Probleme, aber neue entstehen.

Geige hier: http://jsfiddle.net/cforcloud/3wj20bmL/
Hinweis: Dies nutzt Bootstrap-Grid-System

Sein wenig jquery braucht, um die Inhaltszellen zu finden. divs, die keine Kinder haben werden .cell

$('.row div').filter(function() { 
    return $(this).children().length == 0; 
}) 
    .addClass('cell') 
    .hover(

function() { 
    $(this).parent('.row') 
     .addClass('sele'); 


}, function() {});