Change background-color of 1st row in the table

Below is my table that is getting populated with spry dataset

Here is my dataset

var ds1 = new Spry.Data.XMLDataSet("/xml/data.xml", "rows/row"); 

Here is my jquery inside a method that is called on a button click

function addRow()
{
var newRow = new Array();
var nextID = ds1.getRowCount(); 

newRow['ds_RowID'] = nextID; 
newRow['id'] = "x"; 
newRow['name'] = "Abhishek";
newRow['country'] = "India";


ds1.dataHash[newRow['ds_RowID']] = newRow; 
ds1.data.push(newRow); 

Spry.Data.updateRegion(ds1); 

ds1.sort('name','descending'); 
ds1.setCurrentRow(newRow.ds_RowID);

$(".trEven td").css("background-color", "red");
alert($.fn.jquery);

/*$("#tableDg tbody tr:first").css({
    "background-color": "red"
});*/
}

Here is my table

<div id="cdiv" style="width:100%;" spry:region="ds1">
<table id="tableDg" 
    style="border:#2F5882 1px solid;width:100%;"  cellspacing="1" cellpadding="1"> 

    <thead>
     <tr id="trHead" style="color :#FFFFFF;background-color: #8EA4BB"> 
         <th width="2%"><input id="chkbHead" type='checkbox' /></th>
         <th width="10%" align="center" spry:sort="name"><b>Name</b></th> 
         <th width="22%" align="center" spry:sort="host"><b>Country</b></th> 

     </tr>
     </thead>

     <tbody spry:repeat="ds1">   
     <tr id="trOdd"   
     spry:if="({ds_RowNumber} % 2) != 0" onclick="ds1.setCurrentRow('{ds_RowID}');"
        style="color :#2F5882;background-color: #FFFFFF" class="{ds_OddRow}"> 
         <td><input type="checkbox" id="chkbTest" class = "chkbCsm"></input></td>
         <td width="10%" align="center">&nbsp;&nbsp;{name}</td> 
         <td width="22%" align="center">&nbsp;&nbsp;{country}</td> 


     </tr> 

开发者_如何学JAVA     <tr id="trEven" 
     spry:if="({ds_RowNumber} % 2) == 0" onclick="ds1.setCurrentRow('{ds_RowID}');"
        style="color :#2F5882;background-color: #EDF1F5;" class="{ds_EvenRow}"> 
         <td><input type="checkbox" class = "chkbCsm"></input></td>
         <td id="tdname" width="10%" align="center">&nbsp;&nbsp;{name}</td> 
         <td width="22%" align="center">&nbsp;&nbsp;{country}</td> 

     </tr>
     </tbody>
     </table>
</div> 

Am I going wrong somewhere, please guide me. Thanks :)

If I remember right, <tr> is only describing structure. <td> represents visual part of the table. Or this is how some browsers renders them.

Therefore $("#trEven td").css("background-color", "red") should work. And preferrably you should use classes instead of ids in these kind of cases where there may exist multiple instances.

Works for me (jsFiddle). What problems are you experiencing?

If your use classes instead of id's, you can use something like the following:

$('.trEven').each(function() {
    $(this).css({"background-color": "red"});
});

See for reference: jQuery API - .each()

You shouldn’t be using ids for odd and even rows. id values are meant to be unique within the page.

So, I’d suggest:

<tr class="trOdd"

and:

<tr class="trEven"

and then:

$(".trEven")

If you really only want the first row in the table body to get a red background (as opposed to all the even ones), then your selector should be:

$("#tableDg tbody tr:first")