突出显示具有不同行跨度的备用表行答案

【问题标题】：Highlighting Alternate Table Rows With Varying Rowspans突出显示具有不同行跨度的备用表行
【发布时间】：2020-02-09 17:48:37
【问题描述】：

我有一个table，而td 的rowspan 各不相同，所以我无法实现我想要的。

这是我目前拥有的：

<html>
   <head>
      <style>
         table {
         border-collapse: collapse;
         }
         td{
         padding: 5px;
         border-right: 1px solid #DDD;
         }
         tbody{
         border-bottom: 2px solid black;
         }
         tr,td :not(:last-child){
             border-bottom: 1px solid #DDD;
         }
      </style>
   </head>
   <body>
      <table>
         <thead>
            <tr>
               <td>Customer</td>
               <td>Date of Order</td>
               <td>Purcahsed Product Numbers's</td>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td rowspan="4">John Doe</td>
               <td rowspan=2>08/30/2018</td>
               <td>#5894895984</td>
            </tr>
            <tr>
                <td>#5894895984</td>
            </tr>
            <tr>
                <td>01/29/2018</td>
               <td>#32344</td>
            </tr>
            <tr>
                <td>08/19/2019</td>
               <td>#85949854</td>
            </tr>
         </tbody>
         <tbody>
            <tr>
                <td rowspan="4">Jane Smith</td>
               <td>03/22/2019</td>
               <td>#0034003</td>

            </tr>
            <tr>
               <td rowspan=3>03/12/2016</td>
               <td>#938498544</td>
            </tr>
            <tr>
               <td>#545635245</td>
            </tr>
            <tr>
                <td>#00239029</td>
            </tr>
         </tbody>
      </table>
   </body>
</html>

这就是我希望表格的样子：

这可能只使用 html 和 css 还是我需要使用 javascript/jQuery？谢谢！

【问题讨论】：

通过 CSS，您可以每 4 行绘制较粗的线，选择器过滤行位置和 td 的行跨越，但对于高亮部分，css 将无法提供帮助。您可以查找 rowspan 属性，但只能从那里选择任何下一个兄弟姐妹。背景部分需要 JavaScript。

标签： jquery html css html-table

【解决方案1】：

$('.highlightStart:even').each(function() {
      let startingRowspan = $(this).attr('rowspan');
      $(this).nextAll().addBack().addClass('highlight'); 
      $(this).closest('tr').nextAll().slice(0, startingRowspan-1).addClass('highlight');
});

【讨论】：

请在您的回答中描述问题是什么，以及这个 sn-p 将如何解决它，以帮助其他人理解这个答案

【解决方案2】：

您可以使用tbody 元素对表格的不同部分进行分组，如下所示：

table {
  border-collapse: collapse;
}

td {
  padding: 5px;
  border-right: 1px solid #DDD;
}

tbody {
  border-bottom: 2px solid black;
}

tr,
td :not(:last-child) {
  border-bottom: 1px solid #DDD;
}

tbody:nth-child(2n+1) td {
  background-color: tomato;
}

<table>
  <thead>
    <tr>
      <td>Customer</td>
      <td>Date of Order</td>
      <td>Purcahsed Product Numbers's</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="4">John Doe</td>
      <td rowspan="2">08/30/2018</td>
      <td>#5894895984</td>
    </tr>
    <tr>
      <td>#5894895984</td>
    </tr>
    <tr>
      <td>01/29/2018</td>
      <td>#32344</td>
    </tr>
    <tr>
      <td>08/19/2019</td>
      <td>#85949854</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td rowspan="4">Jane Smith</td>
      <td>03/22/2019</td>
      <td>#0034003</td>
    </tr>
    <tr>
      <td rowspan="3">03/12/2016</td>
      <td>#938498544</td>
    </tr>
    <tr>
      <td>#545635245</td>
    </tr>
    <tr>
      <td>#00239029</td>
    </tr>
  </tbody>
</table>

【讨论】：