Sortieren Tabellenzeilen basierend auf Hintergrund-Farbe mit Jquery

Question

Das ist meine FIDDLE

<table> 
    <tr> 
     <td> 
      <div style="background:blue;color:white">hello</div> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <div style="background:pink;color:white">hello</div> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <div style="background:blue;color:white">hello</div> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <div style="background:green;color:white">hello</div> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <div style="background:pink;color:white">hello</div> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <div style="background:green;color:white">hello</div> 
     </td> 
    </tr> 
</table> 

Wie neu anordnen ich die HTML-Tabellenzeilen basierend auf Farbe? Ich möchte HTML-Tabellenzeilen basierend auf der Hintergrundfarbe der Zeilen gruppieren.

Answer 1

Verwenden Sie sort() zum Sortieren von Array von tr Elementen. Sie können des Elements in der Funktion des Sortierens und der Anordnung jedes Elementes erhalten.

$("table tr").sort(function (a, b){ 
 
    return $("div", b).css("background") < $("div", a).css("background") ? 1 : -1;  
 
}).appendTo('table');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
     <td> 
 
      <div style="background:blue">hello</div> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
      <div style="background:pink">hello</div> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
      <div style="background:blue">hello</div> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
      <div style="background:green">hello</div> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
      <div style="background:pink">hello</div> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
      <div style="background:green">hello</div> 
 
     </td> 
 
    </tr> 
 
</table>

Answer 2

Sie können es einfach in Javascript tun.

1. Initiieren eines leeren js Objekt wie folgt var colorRowmap = {}
2. Schleife durch alle Elemente (tr Elemente) der Tabelle und colorname von jedem tr erhalten. Und wenn diese Farbe nicht als Schlüssel des colorRowMap-Objekts existiert, tun Sie colorRowMap[colorName] = [currentTableRow], sonst tun Sie colorRowMap[colorName] = colorRowMap[colorName].push(currentTableRow)
3. Leeren Sie die Tabelle.
4. Durchlaufen Sie alle Tasten von colorRowMap und drücken Sie die Pfeiltasten auf den Tisch.

Fertig. :)

Answer 3

Ich überprüfte Ihre Frage, ich denke, Sie möchten jeden tr durch Farbe unterscheiden, HTML, Stil und Skript für Sie hier hinzufügen.

Hier ist die Html

<table> 
    </tbody> 
     <tr><td>123</td></tr> 
     <tr><td>123</td></tr> 
     <tr><td>123</td></tr> 
     <tr><td>123</td></tr> 
     <tr><td>123</td></tr> 
    </table> 

Sie dieses Skript hinzufügen, die von dieser Funktion all tr ​​einzigartige Klassen haben wird. Sie können dort Hintergrundfarben usw. Stil auf der Basis der Klasse

<script> 
// please do add jQuery file to prevent error 
function adddClass() { 
     for(i=1; i<=6; i++) { 
      alert(""); 
      jQuery('table tr:nth-child('+ i +')').addClass("color"+i); 
     } 
    } 
    adddClass(); 
    </script> 

Hier ist der Stil für die Hintergrundfarbe der einzelnen Tabellenzeile tr

<style> 
.color1{background-color:orange;} 
.color2{background-color:teal;} 
.color3{background-color:red;} 
.color4{background-color:#717171;} 
.color5{background-color:khaki;} 
.color6{background-color:lightgray;} 
tr, table, body{width:100%;} 
</style> 

Hope this helfen, Dank hinzuzufügen.!