组表行jQuery

Question

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

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

当状态发生变化时，我需要在上一行添加一个底部边框，从而根据状态对表格行进行分组。

表格根据状态文本排序，我需要将底部边框应用于状态文本正在更改的行。 这将显示根据其状态值分组的表的行。

我想要一个单行选择器，而不是遍布整个表。

全部谢谢。

Answer 1

如果您稍微构建一下桌子，那么对您来说会更容易。为标题行添加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;
});

假设您的表已经按照问题中的说明排序，请使用td对每个 ^rd nth-child(3)进行迭代，将innerText与最后一个进行比较

工作小提琴：http://jsfiddle.net/abhitalks/ucedwhb0/

<强> 段 ：

＆＃13;

＆＃13;

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();

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这是一个解决方案，它将根据该状态的最后一行来打开/关闭一个类。因此，当您使用staus更改并调用它时，它也将删除不正确行上的类

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

如果您希望在单元格中的标记中添加任何空格，请在比较之前对文本值使用$.trim()

的 DEMO