jQuery表行分隔符

我有一个HTML表，其中第一列值表示a、B、C组。。。我想通过给每个组的最后一行一个边框来划分每个组，因此在下面的示例中，第2行和第3行（或者确切地说是子td元素）将设置一个边框底部样式集

<tr><td>A</td><td>4654</td><td>ABAB</td></tr>
<tr><td>A</td><td>498</td><td>JOI</td></tr>
<tr><td>B</td><td>165</td><td>FTY</td></tr>
<tr><td>C</td><td>798</td><td>KPO</td></tr>

A4654ABAB
A498JOI
B165FTY
C798KPO

在jQuery中有什么简单的方法可以做到这一点吗

编辑：为了清楚起见，我加了一张图片

根据您的问题，您希望更改中间

标签上每个

的样式，即您提到的“子td元素”。我会给你一个工作的起点

上面的查询首先获取所有的

s，然后删除第一个和最后一个。然后它继续选择左边的

上的所有

s。最后应用边框底部css。 请查看Jquery

not

函数，从查询中取消选择第一个和最后一个。 例如：

更新：

<table>
<thead>
  <tr><td>A</td><td>4654</td><td>ABAB</td></tr>
</thead>
<tbody>
  <tr><td>A</td><td>498</td><td>JOI</td></tr>
  <tr><td>B</td><td>165</td><td>FTY</td></tr>
</tbody>
<tbody>
<tr><td>C</td><td>798</td><td>KPO</td></tr>
</tbody>
</table>

thead td,
tbody tr:last-child td {
    border-bottom: #000000 solid 1px;
}
td:not(:first-child) {
  border-left: #000000 solid 1px;
}

据我所知，没有内在的方法可以做到这一点。你需要写它。下面的代码遍历每个

标记。如果先前标记的第一个内容不同于当前标记的内容，则它会向子标记添加底部边框

$('table tr').each(function(index, item){
    //Checks if the contents of previous td differ from current
    if($(item).find("td:first").text() != $(item).prev().find("td:first").text()){
        // If so, underline it
        $(item).prev().find("td").css("borderBottom", "1px black solid");
  }
});

小提琴示例：

根据您的问题，您希望更改中间

标签上每个

的样式，即您提到的“子td元素”。我会给你一个工作的起点

上面的查询首先获取所有的

s，然后删除第一个和最后一个。然后它继续选择左边的

上的所有

s。最后应用边框底部css。 请查看Jquery

not

函数，从查询中取消选择第一个和最后一个。 例如：

更新：

<table>
<thead>
  <tr><td>A</td><td>4654</td><td>ABAB</td></tr>
</thead>
<tbody>
  <tr><td>A</td><td>498</td><td>JOI</td></tr>
  <tr><td>B</td><td>165</td><td>FTY</td></tr>
</tbody>
<tbody>
<tr><td>C</td><td>798</td><td>KPO</td></tr>
</tbody>
</table>

thead td,
tbody tr:last-child td {
    border-bottom: #000000 solid 1px;
}
td:not(:first-child) {
  border-left: #000000 solid 1px;
}

据我所知，没有内在的方法可以做到这一点。你需要写它。下面的代码遍历每个

标记。如果先前标记的第一个内容不同于当前标记的内容，则它会向子标记添加底部边框

$('table tr').each(function(index, item){
    //Checks if the contents of previous td differ from current
    if($(item).find("td:first").text() != $(item).prev().find("td:first").text()){
        // If so, underline it
        $(item).prev().find("td").css("borderBottom", "1px black solid");
  }
});

---

Fiddle示例：

您不需要jquery来完成这项工作。只有CSS和tbody/thead标签

例如：

Html:

<table>
<thead>
  <tr><td>A</td><td>4654</td><td>ABAB</td></tr>
</thead>
<tbody>
  <tr><td>A</td><td>498</td><td>JOI</td></tr>
  <tr><td>B</td><td>165</td><td>FTY</td></tr>
</tbody>
<tbody>
<tr><td>C</td><td>798</td><td>KPO</td></tr>
</tbody>
</table>

thead td,
tbody tr:last-child td {
    border-bottom: #000000 solid 1px;
}
td:not(:first-child) {
  border-left: #000000 solid 1px;
}

Jsfiddle:

如果您想要连续的边框（通过填充改变边框），Css可能需要稍微调整

当然，如果不能按照相同的原则更改原始html或css，则可以使用jQuery转换现有表

编辑：我忽略了您希望按列值分组的事实

在这种情况下，通过javascript/jQuery检测它们是有意义的，而可视化实现它的更简单方法是，正如@printfmyname在其解决方案中所做的那样，只需将样式添加到每个组的最后一行，避免更改DOM以捕获行并在几个TBody中重新注入它们

…但是，无论如何，对完全相同的DOM对象类型使用不同的css（从语义的角度来看）让我有点震惊

我的意思是：它做了问题要求的事情，而且做得正确，效率更高

…但前提是您确信从未希望通过添加或删除某些行来更改该表的内容

如果你将来想这么做，你可能会把事情搞得一团糟。例如：

• 删除组的最后一行将删除组（可视）分隔符
• 在该组的最后一行之后添加（同一组的）行，将（直观地）显示下一组中的行

我再说一遍：我并不是说@printfmyname是错的：它是有效的（我的工作需要更多的工作）。但它可能会在将来引起一些麻烦，除非我们确信永远不想对表进行任何动态更改

---

如果我们不这样做，就值得在语义上对行进行分组，或者至少通过插入带边距的空（和细长）行来改进@printfmyname解决方案，以避免这个问题。

您不需要jquery来做这件事。只有CSS和tbody/thead标签

例如：

Html:

<table>
<thead>
  <tr><td>A</td><td>4654</td><td>ABAB</td></tr>
</thead>
<tbody>
  <tr><td>A</td><td>498</td><td>JOI</td></tr>
  <tr><td>B</td><td>165</td><td>FTY</td></tr>
</tbody>
<tbody>
<tr><td>C</td><td>798</td><td>KPO</td></tr>
</tbody>
</table>

thead td,
tbody tr:last-child td {
    border-bottom: #000000 solid 1px;
}
td:not(:first-child) {
  border-left: #000000 solid 1px;
}

Jsfiddle:

如果您想要连续的边框（通过填充改变边框），Css可能需要稍微调整

当然，如果不能按照相同的原则更改原始html或css，则可以使用jQuery转换现有表

编辑：我忽略了您希望按列值分组的事实

在这种情况下，通过javascript/jQuery检测它们是有意义的，而可视化实现它的更简单方法是，正如@printfmyname在其解决方案中所做的那样，只需将样式添加到每个组的最后一行，避免更改DOM以捕获行并在几个TBody中重新注入它们

…但是，无论如何，对完全相同的DOM对象类型使用不同的css（从语义的角度来看）让我有点震惊

我的意思是：它做了问题要求的事情，而且做得正确，效率更高

…但前提是您确信从未希望通过添加或删除某些行来更改该表的内容

如果你将来想这么做，你可能会把事情搞得一团糟。例如：

• 删除组的最后一行将删除组（可视）分隔符
• 在该组的最后一行之后添加（同一组的）行，将（直观地）显示下一组中的行

我再说一遍：我并不是说@printfmyname是错的：它是有效的（我的工作需要更多的工作）。但它可能会在将来引起一些麻烦，除非我们确信永远不想对表进行任何动态更改

---

如果我们不这样做，就值得在语义上对行进行分组，或者至少改进@printfmyname解决方案，通过插入空白（和细长）行来避免这个问题。

不，我想更改最后一行的样式