分组 table 行 jQuery

Question

我有一个场景，我需要对 HTML table 的行进行分组。 table如下：

<table style="border-collapse:collapse;" cellpadding="5" width="500px">
  <tr>
    <td>No.</td>
    <td>Project</td>
    <td>Status</td>
    <td>cost</td>
  </tr>
  
  <tr>
    <td>1</td>
    <td>Project1</td>
    <td>Open</td>
    <td>10</td>
  </tr>
  
  <tr>
    <td>2</td>
    <td>Project2</td>
    <td>Open</td>
    <td>20</td>
  </tr>
  
  <tr style="border-bottom:1pt solid black;">
    <td>3</td>
    <td>Project3</td>
    <td>Open</td>
    <td>200</td>
  </tr>
  <tr>
    <td>4</td>
    <td>Project4</td>
    <td>Pending</td>
    <td>200</td>
  </tr>
  <tr>
    <td>5</td>
    <td>Project6</td>
    <td>Pending</td>
    <td>200</td>
  </tr>
  
  <tr style="border-bottom:1pt solid black;">
    <td>6</td>
    <td>Project7</td>
    <td>Pending</td>
    <td>200</td>
  </tr>
  
  <tr>
    <td>7</td>
    <td>Project7</td>
    <td>closed</td>
    <td>200</td>
  </tr>
  
  <tr>
    <td>7</td>
    <td>Project8</td>
    <td>closed</td>
    <td>200</td>
  </tr>
</table>

当状态改变时，我需要在前一行添加底部边框，从而根据状态对 table 行进行分组。

table 是根据状态文本排序的，我需要在状态文本更改之后的行应用底部边框。这将显示根据状态值分组的 table 的行。

我想有一个单行选择器而不是在整个 table 中循环。

谢谢大家。

Answer 1

这是一个解决方案，可以根据该状态的最后一行来切换 class on/off。因此，当您诉诸状态更改并调用它时，它还会删除不正确行上的 class

 $('tr:gt(0)').each(function(){
    var $row =$(this),
        status = $(this).find('td').eq(2).text(),
        $nextRow=$row.next();
    if($nextRow.length){
        var isLastOfStatus = status !== $nextRow.find('td').eq(2).text();
        $row.toggleClass('divider', isLastOfStatus)
    }  
});

如果您希望在单元格内的标记中添加任何白色 space，请在比较

之前对文本值使用 $.trim()

DEMO

Answer 2

如果您 table 稍微组织一下，对您来说会更容易。为 header 行添加 thead，为内容行添加 tbody。那么你可以轻松地做到这一点：

var last = null;
$("table tbody tr td:nth-child(3)").each(function() {
    if ((last) && (last != this.innerText)) {
        $(this).parent().addClass("group");
    } 
    last = this.innerText;
});

假设你的 table 已经按照你的问题中的指示排序，使用 nth-child(3) 迭代每 3^rd td，比较innerText 和最后一个

工作Fiddle：http://jsfiddle.net/abhitalks/ucedwhb0/

片段:

function groupRows() {
    var last = null;
    $("table tbody tr td:nth-child(3)").each(function () {
        if ((last) && (last != this.innerText)) {
            $(this).parent().addClass("group");
        }
        last = this.innerText;
    });
}

groupRows();

tr.group { border-top: 1px solid black; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="border-collapse:collapse;" cellpadding="5" width="500px">
    <thead>
        <tr>
            <th>No.</th>
            <th>Project</th>
            <th>Status</th>
            <th>cost</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Project1</td>
            <td>Open</td>
            <td>10</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Project2</td>
            <td>Open</td>
            <td>20</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Project3</td>
            <td>Open</td>
            <td>200</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Project4</td>
            <td>Pending</td>
            <td>200</td>
        </tr>
        <tr>
            <td>5</td>
            <td>Project6</td>
            <td>Pending</td>
            <td>200</td>
        </tr>
        <tr>
            <td>6</td>
            <td>Project7</td>
            <td>Pending</td>
            <td>200</td>
        </tr>
        <tr>
            <td>7</td>
            <td>Project7</td>
            <td>closed</td>
            <td>200</td>
        </tr>
        <tr>
            <td>7</td>
            <td>Project8</td>
            <td>closed</td>
            <td>200</td>
        </tr>
    </tbody>
</table>

.

分组 table 行 jQuery

Group table rows jQuery

html

css

jquery