JQuery：如何使table的某一行变色呢？

Posted 2023-03-15

$(function()
$('#table1 tr:even').css('background',"#D6D6D6");
$('#table1 tr:odd').css('background',"white");
);
我使用以上的代码只能使奇偶行变色，但是如果我就是要指定第1、5、10、15行为变色该如何实现呢？求解

jquery使用css3选择器“:nth-child(n)”可以快速选择具有一定规律排列的元素，:nth-child(n) 用于匹配属于其父元素的第 n 个子元素，其中n 可以是数字、关键词或公式。注意：

此过滤器的序号是从1开始的

需要IE8以上浏览器支持

下面实例演示——为table的第1,4,7，...行添加背景色变色：

1、html结构

<table id = "test">
<tr><td>1</td><td>1</td><td>2</td><td>3</td></tr>
<tr><td>2</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>3</td><td>7</td><td>8</td><td>9</td></tr>
<tr><td>4</td><td>1</td><td>2</td><td>3</td></tr>
<tr><td>5</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>6</td><td>7</td><td>8</td><td>9</td></tr>
<tr><td>7</td><td>1</td><td>2</td><td>3</td></tr>
<tr><td>8</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>9</td><td>7</td><td>8</td><td>9</td></tr>
</table>
<input type='button' value='设置'/>

2、jquery代码

$(function()
$("input[type='button']").click(function() 
$("table#test tr:nth-child(3n+1)").css("background","#229922")
);
);

3、效果演示

参考技术A var tr = $('#table1 tr');
tr.each(function()
    var index = $(this).index();
    if((index+1)%5==0)
        $(this).css("background","你想要定的颜色");
    
);

本回答被提问者采纳