Question

我有一个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中有没有简单的方法呢？

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

Answer 1

~~根据您的问题，您希望更改中间<td>标记上的每个<tr>的样式，即您提到的，＆＃34;子元素元素＆＃34;。我将为您提供一个工作的起点。~~

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

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

<强>更新

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

$('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/

Answer 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解决方案以避免此问题。 / p>

jQuery表行分隔符

2 个答案: