how to set the css for ajax success function

Question

I'm working with Asp .Net MVC3.Following is my ajax success function,

         success:function(data){
        $('.travTableContent').empty();
        var text3=data.data.lstunutilizedownershipentities;
        for( var item in text3)
        {    
        debugger;
        $('<tr />').html(text3[item]).appendTo('.travTableContent');            
        $('<td />').html(text3[item].CurrentOwnership).appendTo('.travTableContent');
        $('<td />').html('<a href="#" onclick="javascript:GetDetail(\'' + text3[item].CurrentOwnership + '\');">' + text3[item].cnt + '</a>').appendTo('.travTableContent');                                               
        }            
        }     
        }); 

i want to set the color for odd rows of(tr:odd) what jquery code i can use to do this

Answer 1

您可以使用jQuery的.css()函数并执行以下操作：

$('<tr />').html(text3[item]).css('background', 'red').appendTo('.travTableContent');

Answer 2

您可以简单地使用，

$("#id").css("backgroundColor","yellow");

Answer 3

No need to use jQuery for this. You can define the CSS rules in your CSS file using the nth-child() selector :

.travTableContent tr:nth-child(2) { background-color: Gray; }

Answer 4

the easiest way is to use :odd selector..

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

after the all the tr is appended to table inside the success function.

however i doubt your table structure is valid... since i could see your are creating tr appending it to content.. and then td adding it to content again instead of <tr> .... it should be added to tr ... <td> should always be inside <tr> else it is invalid table structure.

Answer 5

Roughly, your logic would go like this.

 var i=0;
  for( var item in text3)
  {    
        i++;

        debugger;
        $('<tr />').html(text3[item]).appendTo('.travTableContent');            
        $('<td />').html(text3[item].CurrentOwnership).appendTo('.travTableContent');
        $('<td />').html('<a href="#" onclick="javascript:GetDetail(\'' + text3[item].CurrentOwnership + '\');">' + text3[item].cnt + '</a>').appendTo('.travTableContent');      

        if(i%2 == 0){
        $('<tr />').css('background', 'red');
        }                                         
  }   

However, I doubt your code is correct. Please post a working fiddle.

Answer 6

You first need to create your table currectly : TD should be appended to TR not table.

 $('<td />').html(text3[item].CurrentOwnership).appendTo('.travTableContent');
    $('<td />').html('<a href="#" onclick="javascript:GetDetail(\'' + text3[item].CurrentOwnership  + '\');">' + text3[item].cnt + '</a>').appendTo('.travTableContent');

this should be as :

 $('<td />').html(text3[item].CurrentOwnership).appendTo('.travTableContent tr :last');
    $('<td />').html('<a href="#" onclick="javascript:GetDetail(\'' + text3[item].CurrentOwnership + '\');">' + text3[item].cnt + '</a>').appendTo('.travTableContent tr :last'); 

like you need to appendTo :last TR from the table.

Once that's done, you can use following to give color to odd rows.

$("table tr :odd").css("background-color", "red");