如何使用 jQuery 对多行记录进行条带化？答案

【问题标题】：How to stripe rows for a multiple row record using jQuery?如何使用 jQuery 对多行记录进行条带化？
【发布时间】：2016-09-24 04:38:14
【问题描述】：

我目前正在使用以下 jQuery 脚本来突出显示表格中的行，效果很好！

   <script type="text/javascript">
        $(document).ready(function()
        {
            $('table.grid tbody tr:odd').addClass('alt');
        });
    </script>

这对于每一行都是新记录的数据表非常有用，但是，我遇到了一个问题，我的记录占用了两行数据，并且想要修改 jQuery，使其呈现类似：

<table>
    <thead>
        <tr>
            <th>Col 1</th>
            <th>Col 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Record 1 Field 1</td>
            <td>Record 1 Field 2</td>
        </tr>
        <tr>
            <td colspan="2">Record 1 Field 3</td>
        </tr>
        <tr class="alt1">
            <td>Record 2 Field 1</td>
            <td>Record 2 Field 2</td>
        </tr>
        <tr class="alt2">
            <td colspan="2">Record 2 Field 3</td>
        </tr>
        <tr>
            <td>Record 3 Field 1</td>
            <td>Record 3 Field 2</td>
        </tr>
        <tr>
            <td colspan="3">Record 1 Field 3</td>
        </tr>
        <tr class="alt1">
            <td>Record 4 Field 1</td>
            <td>Record 4 Field 2</td>
        </tr>
    <tr class="alt2">
        <td colspan="4">Record 2 Field 3</td>
    </tr>
</tbody>
</table>

我如何在 jQuery 中实现这一点，我希望每 3 行都有一个“alt1”类，每 4 行有一个“alt2”类？

【问题讨论】：

标签： jquery html css html-table

【解决方案1】：

上面的答案稍微正确。不要使用 i%3==0 和 i%4==0，而是使用相同的模除数。因此，从 0 开始，i%4==2 和 i%4==3 将跳过两个、取两个、跳过两个、取两个等。另一种方式取 3、4、6、8、9、12等。所以，小的修改将是

<script type="text/javascript">
    $(document).ready(function()
    {
        $('table.grid tbody tr').each(function(i) {
            if(i%4 == 2) {
                //Each 3rd row in sets of 4
                $(this).addClass('alt1');
            }
            if(i%4 == 3) {
                //Each 4th row in sets of 4
                $(this).addClass('alt2');
            }
        });
    });
</script>

【讨论】：

我是不是误会问题了，他要的不是3、4、6、8、9、12吗？
啊。是的。呵呵，我完全误会了。我以为他想要 3、6、9、12 等组和 4、8、12、16 等组，他实际上想要 3/4、6/7 等，是吗？

【解决方案2】：

   <script type="text/javascript">
        $(document).ready(function()
        {
            $('table.grid tbody tr').each(function(i) {
                if(i%3 == 0) {
                    //We're at a 3rd row
                    $(this).addClass('alt1');
                }
                if(i%4 == 0) {
                    //We're at at 4th row
                    $(this).addClass('alt2');
                }
            });
        });
    </script>

【讨论】：

【解决方案3】：

将每条记录（多行或不多行）分配到单独的 tbody 标记可能会更容易。你可以有很多 tbody 标签，如果你的记录是多行的，那么单独的 tbody 标签中的每条记录在这里最有意义。

$('table.grid tbody:odd tr:first').addClass('alt1');
$('table.grid tbody:odd tr:last').addClass('alt2');

【讨论】：

【解决方案4】：

$('table.grid tbody tr:nth-child(4n+2)').addClass('alt1');
$('table.grid tbody tr:nth-child(4n+3)').addClass('alt2');

应该可以工作（未经测试）。

【讨论】：

【解决方案5】：

嗯——这个表结构很不寻常——你能展示一些你放在这样一个表中的样本数据吗？

在我能想到的大多数情况下，使用行跨度（如 Nerdling 所述）或正文中的其他 TH 元素（为每条记录提供标题行）或两者的组合会更准确。

一旦你的结构有了额外的细节，你就可以编写 javascript 来读取表的实际结构，而不是将第 3 条/第 4 条值硬编码到脚本中。例如，您最终会得到一个无需执行任何额外操作即可处理 3 行记录的脚本。

如果你能展示一些示例数据，我会很高兴地编写脚本！

【讨论】：

【解决方案6】：

如果占用另一行，请使用rowspan (HTML) attribute 表示。

【讨论】：

实际上是 2 行映射到一个记录，我想对这些行进行条带化。