组表行jQuery

组表行jQuery,jquery,html,css,Jquery,Html,Css,我有一个场景,需要对HTML表的行进行分组。 下表如下: 不 项目 地位 成本 1. 项目1 打开 10 2. 项目2 打开 20 3. 项目3 打开 200 4. 项目4 悬而未决的 200 5. 项目6 悬而未决的 200 6. 项目7 悬而未决的 200 7. 项目7 关闭 200 7. 项目8 关闭 200 这里有一个解决方案,可以根据最后一行的状态来打开/关闭类。因此,当您使用staus更改并调用它时,它也会删除错误行上的类 如果希望在单元格内的标记中添加任何空白,请在比较之前在文

我有一个场景,需要对HTML表的行进行分组。 下表如下:


不
项目
地位
成本
1.
项目1
打开
10
2.
项目2
打开
20
3.
项目3
打开
200
4.
项目4
悬而未决的
200
5.
项目6
悬而未决的
200
6.
项目7
悬而未决的
200
7.
项目7
关闭
200
7.
项目8
关闭
200

这里有一个解决方案,可以根据最后一行的状态来打开/关闭类。因此,当您使用staus更改并调用它时,它也会删除错误行上的类

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


如果您稍微组织一下您的表格,对您来说会更容易。为标题行添加
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;
});
假设您的表已经按照问题中的指示进行了排序,使用第n个子项(3)每隔3次迭代一次
td
,将
innerText
与上一次进行比较

工作小提琴:

片段

函数groupRows(){
var last=null;
$(“表tbody tr td:nth child(3)”)。每个(函数(){
if((last)&(last!=this.innerText)){
$(this.parent().addClass(“组”);
}
last=this.innerText;
});
}
groupRows()
tr.group{边框顶部:1px纯黑色;}

不
项目
地位
成本
1.
项目1
打开
10
2.
项目2
打开
20
3.
项目3
打开
200
4.
项目4
悬而未决的
200
5.
项目6
悬而未决的
200
6.
项目7
悬而未决的
200
7.
项目7
关闭
200
7.
项目8
关闭
200

您是否可以创建一个HTML文件来显示状态变化时的外观?除了@Locercus之外,我还想知道状态是如何变化的。@Zword我会支持它。您可以选择函数调用还是必须使用它?
分组
是一个宽泛的术语,没有一些标准和预期的输出。排序可能符合示例条件,但这是未知的。@Locercus无论如何都要进行编辑,以显示状态如何更改以及更改后需要的内容。如果您正确更新了您的问题,则您的问题将重新打开
var last = null;
$("table tbody tr td:nth-child(3)").each(function() {
    if ((last) && (last != this.innerText)) {
        $(this).parent().addClass("group");
    } 
    last = this.innerText;
});