jquery - 组表行jQuery

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

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

当状态改变时，我需要在前一行中添加下边框，从而根据表行的状态对它们进行分组。
表是根据状态文本排序的，我需要对状态文本更改后的行应用下边框。
这将显示根据状态值分组的表行。
我在想用一个单行选择器，而不是在桌子上到处循环。
谢谢大家。

最佳答案

如果你稍微整理一下桌子，对你来说会容易些。为标题行添加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每3个nth-child(3)迭代一次，将innerText与最后一个进行比较。
工作小提琴：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>

.

关于jquery - 组表行jQuery，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27774997/