jQuery 表格行分隔符答案

【问题标题】：jQuery table row dividerjQuery 表格行分隔符
【发布时间】：2017-01-02 00:27:47
【问题描述】：

我有一个 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>

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

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

【问题讨论】：

标签： jquery html html-table

【解决方案1】：

~~根据您的问题，您想更改中间 <tr> 标签上每个 <td> 的样式，即您提到的“子 td 元素”。我会给你一个工作的起点。~~

$('table tr').not(":first").not(":last").find("td:last").css("borderBottom", "1px black solid");

上面的查询首先获取所有<tr>s 和第一个和最后一个丢弃。然后它继续选择剩下的<tr> 上的所有<td>s。最后应用边框底部 css。 ~~请查看 Jquery not 函数以从查询中取消选择第一个和最后一个。~~ ~~示例：https://jsfiddle.net/0fhsdfbr/~~

更新：

据我所知，没有内置的方法可以做到这一点。你需要写它。以下代码遍历每个 <tr> 标记。如果之前的标签 first 的内容与 current 的内容不同，那么它会为子 <td>s 添加一个底部边框。

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

小提琴示例：https://jsfiddle.net/0fhsdfbr/2/

【讨论】：

不行，我要更改每组最后一行的样式。例如。如果会有第一列值为 A、A、A、B、B、B、B、B、C、C、D 的行，那么第 3、第 8 和第 10 列（第 11 列也无所谓）将具有样式
@pedmillon 更新了查询。你现在可以检查。 jsfiddle.net/0fhsdfbr/1
如果要在最后一行包含最后一个，请删除 .not(":last") 部分
@pedmillon 图片说一千个字。我想我明白了，并将新答案附加到上述答案。干杯；）
您的解决方案工作正常，即使我会提出一个微小的改变，包括添加空行而不是简单地改变最后一行的 css。示例：[jsfiddle.net/0fhsdfbr/4/]。我在回答的 edit 部分解释了这样做的原因。

【解决方案2】：

你不需要 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>

CSS：

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

Jsfiddle： jsfiddle

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

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

编辑：我忽略了你想按列值分组的事实。

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

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

我的意思是：它可以解决所要求的问题，而且做得正确且效率更高。

...但前提是您确定您从不想要通过添加或删除某些行来更改该表的内容。

如果您将来想这样做，您最终可能会把事情搞得一团糟。例如：

删除组的最后一行将删除组（可视）分隔符。
在该组的最后一行之后添加（同一组的）行，将（视觉上）显示下一组中的行。

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

如果我们不是，那么值得在语义上对行进行分组方面付出更多努力，或者至少通过插入带边距的空（和纤细）行来改进 @printfmyname 解决方案以避免此问题。

【讨论】：