如何使用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屋!