您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

使用CSS的替代表格行颜色?

使用CSS的替代表格行颜色?

$(document).ready(function()

{

  $("tr:odd").css({

    "background-color":"#000",

    "color":"#fff"});

});


tbody td{

  padding: 30px;

}



tbody tr:nth-child(odd){

  background-color: #4C8BF5;

  color: #fff;

}


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table border="1">

<tbody>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

</tr>

<tr>

<td>5</td>

<td>6</td>

<td>7</td>

<td>8</td>

</tr>

<tr>

<td>9</td>

<td>10</td>

<td>11</td>

<td>13</td>

</tr>

</tbody>

</table>

一个CSS选择器,实际上是一个伪选择器,称为nth-child。在纯CSS中,您可以执行以下操作:

tr:nth-child(even) {
    background-color: #000000;
}

IE 8不支持

或者,如果您有jQuery:

$(document).ready(function()
{
  $("tr:even").css("background-color", "#000000");
});
CSS 2022/1/1 18:16:18 有532人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶