Markieren Sie mehrere Zeilen in mehreren Tabellen

Question

Ich habe eine Seite mit mehreren Zeilen mit Informationen, die von mehreren Benutzern erstellt wurden. Ich suche nach einer Möglichkeit, alle Benutzerzeilen bei Mouseover hervorzuheben.

Diese "Highlight multiple items on hover's condition" löste fast mein Problem, aber da die Klassen oder IDs in meinem Problem dynamisch aus einer Datenbank sind, würde sie einen Bezeichner aus der Datenbank enthalten und sind jedes Mal einzigartig. Ich konnte es nicht anwenden.

Beispielcode: https://jsfiddle.net/3cehoh78/

<table class="testtable"> 
 
     <tr id="uniqueIDthatcantbechanged"> 
 
     <td class="cellclass">Line 1a</td> 
 
     <td class="cellclass">Sam</td> 
 
     <td class="cellclass">data</td> 
 
     </tr> 
 
     <tr id="uniqueIDthatcantbechanged"> 
 
     <td class="cellclass">Line 2a</td> 
 
     <td class="cellclass">Frodo</td> 
 
     <td class="cellclass">data</td> 
 
     </tr> 
 
     <tr id="uniqueIDthatcantbechanged"> 
 
     <td class="cellclass">Line 3a</td> 
 
     <td class="cellclass">Sam</td> 
 
     <td class="cellclass">data</td> 
 
     </tr> 
 
     <tr id="uniqueIDthatcantbechanged"> 
 
     <td class="cellclass">Line 4a</td> 
 
     <td class="cellclass">Legoman</td> 
 
     <td class="cellclass">data</td> 
 
     </tr> 
 
    </table> 
 
    <br> 
 
    <br> 
 
    <table class="testtable"> 
 
     <tr id="uniqueIDthatcantbechanged"> 
 
     <td class="cellclass">Line 1b</td> 
 
     <td class="cellclass">Sauron</td> 
 
     <td class="cellclass">data</td> 
 
     </tr> 
 
     <tr id="uniqueIDthatcantbechanged"> 
 
     <td class="cellclass">Line 2b</td> 
 
     <td class="cellclass">Sam</td> 
 
     <td class="cellclass">data</td> 
 
     </tr> 
 
     <tr id="uniqueIDthatcantbechanged"> 
 
     <td class="cellclass">Line 3b</td> 
 
     <td class="cellclass">Sam</td> 
 
     <td class="cellclass">data</td> 
 
     </tr> 
 
     <tr id="uniqueIDthatcantbechanged"> 
 
     <td class="cellclass">Line 4b</td> 
 
     <td class="cellclass">Legoman</td> 
 
     <td class="cellclass">data</td> 
 
     </tr> 
 
     <tr id="uniqueIDthatcantbechanged"> 
 
     <td class="cellclass">Line 5b</td> 
 
     <td class="cellclass">Frodo</td> 
 
     <td class="cellclass">data</td> 
 
     </tr> 
 
    </table>

In diesem Beispiel möchte ich alle Zeilen mit "Sam" markiert mit der Maus darüber auf einem von ihnen werden, also Reihen 1a, 3a, 2b, 3b. Ich dachte über das Hinzufügen einer Klasse zu allen Sam-Zeilen beim Erstellen der Tabellen (Sam hat eine eindeutige Benutzer-ID), aber wie ändere ich dann CSS, die alle Zeilen bei mouseover (und nicht nur eine) betrifft. Bitte beachten Sie, dass ich keine CSS-Klassen für alle eindeutigen Benutzer-IDs hinzufügen kann, dies ist nur ein Beispiel.

Answer 1

Hier ist eine Lösung mit JQuery https://jsfiddle.net/3cehoh78/5

$(document).ready(function() { 


    $("tr").hover(function() { 
    var search = $(this).find("td:eq(1)").text(); 

    $(".highlight").removeClass("highlight"); 


    $("tr:contains('"+search+"')").addClass("highlight"); 
    }); /* END HOVER */ 

}); // end document ready 

Answer 2

Einfache Lösung ohne Verwendung von jQuery und co: https://jsfiddle.net/3cehoh78/3/

var rows = [].slice.call(document.querySelectorAll('.testtable tr')); 

rows.forEach(function(row) { 
    row.addEventListener('mouseover', function() { 
    resetHighlighting(); 
    var name = row.querySelector('td:nth-child(2)').textContent; 
    rows.forEach(function(r) { 
     if (r.querySelector('td:nth-child(2)').textContent === name) { 
     r.classList.add('highlighted'); 
     } 
    }); 
    }); 
}); 

function resetHighlighting() { 
    rows.forEach(function(row) { 
    row.classList.remove('highlighted'); 
    }); 
} 

Answer 3

Hier ist eine andere Art und Weise Vanille-JavaScript verwenden.

var tds = document.querySelectorAll('td'); 

var highlight = function() { 
    // take this person's name from the 2nd cell 
    var name = this.parentNode.children[1].innerHTML; 
    // highlight cells with same name 
    tds.forEach(function (td) { 
     var tr = td.parentNode; 
     // compare other's person name with this person name 
     // highlight if there is a match 
     tr.classList.toggle('highlight', tr.children[1].innerHTML === name) 
    }); 
} 
// attach an event listener to all cells 
tds.forEach(function (td) { 
    td.onmouseover = highlight; 
}); 

Demo