Как чередовать строки для многострочной записи, используя jQuery?

Question

В настоящее время я использую следующий скрипт 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'?

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

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

Answer 3

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

должно работать (не проверено).

Answer 4

Вероятно, было бы проще назначить каждую запись (многострочную или нет) в отдельный тег tbody. У вас может быть много тегов tbody, и если ваша запись находится в нескольких строках, то каждая запись в отдельном теге tbody имеет наибольшее значение.

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

Answer 5

Хм - эта структура таблицы довольно необычная - можете ли вы показать некоторые примеры данных, которые вы поместили бы в такую ​​таблицу?

В большинстве случаев, о которых я могу думать, было бы более правильным использовать либо размах строк (как упоминалось в Nerdling), либо дополнительные элементы TH в теле (чтобы дать каждой записи строку заголовка), или их комбинацию.

Как только вы получите этот дополнительный уровень детализации в своей структуре, вы можете написать javascript для чтения фактической структуры таблицы, а не жестко кодировать значения 3-й полосы / 4-й полосы в сценарии. В итоге вы получите скрипт, который будет обрабатывать 3-строчную запись, не делая ничего лишнего, например.

Я с удовольствием разработаю сценарий, если вы сможете показать некоторые образцы данных!

Answer 6

Если требуется другая строка, используйте атрибут rowspan (HTML) , чтобы указать это.