Question

HTML：

<table border="1"style="width:500px" id="table2">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>grades</th>
  </tr>
  <tr>
    <td>riddhi</td>
    <td>bhatt</td>
    <td>50</td>
  </tr>
  <tr>
    <td>sneh</td>
    <td>pandya</td>
    <td>55</td>
  </tr>
  <tr>
    <td>ankit</td>
    <td>purani</td>
    <td>60</td>
  </tr>
</table>

我想在奇数行的表格中添加背景颜色。

JQuery的：

$(document).ready(function(){

    $("#table2 > tr:odd").css("background-color","blue");
});

我是HTML和jQuery的新手，请建议我以便继续...

Answer 1

使用此，

$(document).ready(function(){

    $("#table2 tr:odd").css("background-color","blue");
});

Demo Fiddle

>无法在此工作 - Reference

表格层次为table > tbody > tr > td，因此在这种情况下，请尝试使用

 $("#table2 > tbody > tr:odd").css("background-color","blue");

<强> Demo

Answer 2

试试这个

$("#table2 tr:odd").css("background-color","blue");

DEMO

Answer 3

tbody，thead和tfoot是由html渲染的，因此您需要使用#table2 > tbody > tr:odd,#table2 > thead > tr:odd,#table2 > tfoot > tr:odd作为选择器才能使其正常工作，但您无需在此处使用奇数。如果您只是删除>那么简单就可以了：

$("#table2 tr:odd").css("background-color","blue");

Answer 4

正如其他人所说，

$("#table2 tr:odd")

将选择table2中的所有奇数tr，它将适用于一个简单的表。但是如果你想在table2中放一个表，它也会选择第二个表的trs，因为它们也在table2里面

如果你只想选择table2中的tr，而不是table2中的table，你可以使用

$("#table2>tbody>tr:odd")

仅选择table2的直接tbody子项的直接tr子项

Answer 5

如果以上工作方式都没有，请尝试将$更改为jQuery，它将起作用...

Answer 6

工作正常： http://jsbin.com/caxahube/1/edit

$(document).ready(function(){

  $('table>tbody>tr:odd').css('background-color', 'blue');

});

HTML：使用jquery的背景颜色？

6 个答案:

Demo Fiddle