javascript - 使用jquery在html表中查找相似组的最后一条记录

Question

我有一张 table ，里面有类似的组

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

我想获取A类和B类的最后一条记录，例如

Class A          Kevin        3

和

Class B          Miller       2

这是我的 HTML 表格结构

<table class="style1">
    <tr>
        <td class="style2">
            Class</td>
        <td class="style3">
            StudentName</td>
        <td class="style4">
            RollNo</td>
    </tr>
</table>

如有任何帮助，我们将不胜感激。

Answer 1

从技术上讲，您可以迭代抛出所有行并保存每个类中的最后一行。

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>

但我相信更好的方法是在服务器端标记这些行。