Question

我有一张像这样的类似组的表

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

Technically you can iterate throw all rows and save last one in each class.

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>

But I believe better approach is to mark those rows server side.

Answer 2

You need to loop over the rows, extracting the cell values and comparing with the previous or next sibling. The last one should get included in the result always. There are many ways to iterate over the rows, one of them below:

$(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;
}

See the fiddle

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

2 个答案: