in HTML-Tabelle mit Jquery

Question

Ich habe eine Tabelle mit ähnlicher Gruppe wie diese

Class  StudentName   RollNo. 
Class A  John     1 
Class A  Mathew    2 
Class A  Kevin    3 
Class B  Donald    1 
Class B  Miller    2 

ich letzten Datensatz der Klasse A und Klasse B wie

Class A   Kevin  3 

holen will

und

Class B   Miller  2 

Hier ist meine HTML-Tabellenstruktur

Jede Hilfe wird geschätzt.

Answer 1

Technisch können Sie iterieren werfen Sie alle Zeilen und speichern Sie letzte in jeder Klasse.

var lastInClass = {}; 
 

 
$('table tr').each(function() { 
 
    var row = $(this); 
 
    var rowClass = row.find('td:first').text().trim(); 
 
    
 
    lastInClass[rowClass] = row; 
 
}); 
 

 
$.each(lastInClass, function(rowClass, row) { 
 
    $('<div>').text('Last in class ' + rowClass + ' is ' + row.text()).appendTo('#result'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="style1"> 
 
    <tr> 
 
     <td class="style2"> 
 
      Class A 
 
     </td> 
 
     <td class="style3"> 
 
      John 
 
     </td> 
 
     <td class="style4"> 
 
      1 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td class="style2"> 
 
      Class A 
 
     </td> 
 
     <td class="style3"> 
 
      Mathew 
 
     </td> 
 
     <td class="style4"> 
 
      2 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td class="style2"> 
 
      Class A 
 
     </td> 
 
     <td class="style3"> 
 
      Kevin 
 
     </td> 
 
     <td class="style4"> 
 
      3 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td class="style2"> 
 
      Class B 
 
     </td> 
 
     <td class="style3"> 
 
      Donald 
 
     </td> 
 
     <td class="style4"> 
 
      1 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td class="style2"> 
 
      Class B 
 
     </td> 
 
     <td class="style3"> 
 
      Miller 
 
     </td> 
 
     <td class="style4"> 
 
      2 
 
     </td> 
 
    </tr> 
 
</table> 
 
<div id="result"></div>

Aber ich glaube, besserer Ansatz ist die Zeilen Serverseite zu markieren.

Answer 2

Sie müssen die Zeilen durchlaufen, die Zellenwerte extrahieren und mit dem vorherigen oder nächsten Geschwister vergleichen. Der letzte sollte immer im Ergebnis enthalten sein. Es gibt viele Möglichkeiten, über die Zeilen, einer von ihnen unten iterieren:

$(document).ready(function(){ 
    var res = extractGroupTails(); 
    res.forEach(function(item, index){ 
    $("#result").append(index + " "); 
    $("#result").append(item.join(',') + "<br/>"); 
    }); 
}); 

function extractGroupTails(){ 
    var result = []; 
    $("#myTable tr").each(function(index){ 
    var currentRow = getArray($(this)), 
     nextRow = getArray($(this).next()); 

    if(currentRow.length === 0){ 
     // table header 
    }else if(nextRow.length === 0 || currentRow[0] !== nextRow[0]){ 
      result.push(currentRow); 
    } 
    }); 
    return result; 
} 

function getArray($row){ 
    var res = []; 
    $($row).children("td").each(function(index){ 
    res.push($(this).html()); 
    }); 
    return res; 
} 

Siehe fiddle