如何使用jQuery为多行记录分割行？ [英] How to stripe rows for a multiple row record using jQuery?

问题描述

I am currently using the following jQuery script to highlight rows in my table, and it works great!

类型= 文本/ JavaScript的 >
$（document）.ready（function（）
{
$（'table.grid tbody tr：odd'）。addClass（'alt'）;
}）;
< / script>

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

这对于每行都是新记录的数据表非常适用，但是，我已经运行成为一个问题，我有记录占用两行数据，并希望修改jQuery，使其呈现如下所示：

This works great for tables of data where each row is truly a new record, however, I have run into an issue where I have records that take up two rows of data and would like to modify the jQuery so it renders something like:

<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中完成这项工作，我希望每个第三行都有一个'alt1'和每第四行有一个'alt2'类？

How would I accomplish this in jQuery where I want every 3rd row to have a class of 'alt1' and every 4th row to have a class of 'alt2'?

推荐答案

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

The above answer is slightly correct. Instead of using i%3==0 and i%4==0, use the same modulus divisor. So, starting at 0, i%4==2 and i%4==3 would skip two, take two, skip two, take two, etc. The other way takes the 3, 4, 6, 8, 9, 12, etc. So, minor modification would be

<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>

这篇关于如何使用jQuery为多行记录分割行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！