1

我目前正在使用以下 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”类？

4

6 回答 6

4

上面的答案稍微正确。不要使用 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>
于 2009-03-23T16:28:56.143 回答
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>
于 2009-03-23T16:16:46.143 回答
1

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

$('table.grid tbody:odd tr:first').addClass('alt1');
$('table.grid tbody:odd tr:last').addClass('alt2');
于 2009-03-23T16:43:40.383 回答
1 
$('table.grid tbody tr:nth-child(4n+2)').addClass('alt1');
$('table.grid tbody tr:nth-child(4n+3)').addClass('alt2');

应该工作（未经测试）。

于 2009-03-23T17:10:00.460 回答
0

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

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

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

如果您可以显示一些示例数据，我会很高兴地编写脚本！

于 2009-03-24T09:59:13.733 回答
-1

如果它占用另一行，请使用rowspan (HTML) 属性来指示。

于 2009-03-23T16:11:23.970 回答