2015-03-30 84 views
0

我有一个asp.net应用程序。我正在使用jquery ajax调用从服务器端检索数据并显示它。如何在jquery ajax成功事件上应用不同的css样式?

这里是我的代码,

<div> 
    <table class="window_month" style="margin-top: 15px; text-align: center;"> 
     <tr id="NavigationMonth"> 
      <td id="mo1" runat="server" onclick=""> 
      Jan 
      </td> 
      <td id="mo2" runat="server" onclick=""> 
      Feb 
      </td> 
      <td id="mo3" runat="server" onclick=""> 
      Mar 
      </td>         
     </tr> 
    </table> 
</div> 

<script type="text/javascript"> 
    $('.window_month td').on('click', function() { 
    var ddl = $("#ddlYear option:selected").text(); 
    var idName = this.id; 
    var selectedid = idName.substring(2); 

    var param = { 
     month: selectedid, 
     year: ddl 
    }; 

    var strParam = JSON.stringify(param); 

    $.ajax({ 
     type: "POST", 
     url: "Default.aspx/GetSelectedTDData", 
     contentType: "application/json;", 
     data: strParam, 
     async: false, 
     dataType: "json", 
     success: function (result) { 
      alert('Yay! It worked!'); 
      var response = result.d; 
      $('#lblValid').text(response[0]); 
      $('#lblNotValid').text(response[1]); 
      $('#mo' + selectedid).css('backgroundColor', '#aaa'); 
     }, 
     error: function (result) { 
      alert('Oh no :('); 
     } 
    }); 
}); 
</script> 

上面的代码突出了被点击的HTML TD元素,但是当我点击另一个TD元素上,它应该忘记在最后点击的元素,并突出一个新的。

目前它不会忘记最后点击的元素。我怎样才能做到这一点?

回答

0

试试这个, 您应该从所有TD去除背景,然后将其添加到作为TD刚刚点击

$('.window_month td').css('backgroundColor', 'non highlighted color code'); 
$('#mo' + selectedid).css('backgroundColor', '#aaa'); 
+0

它从所有的td元素中删除背景颜色。我想要突出显示单击的td元素。 – nrvbha 2015-03-30 19:55:23

+0

从所有td中删除背景,然后添加到您单击的td中,使用编辑的答案 – Farhan 2015-03-30 19:56:18

0

它完成。

for (var i = 1; i <= 12; i++) { 
    if (i == selectedid) { 
     $('#mo' + selectedid).css('backgroundColor', '#aaa'); 
    } 
    else { 
     $('#mo' + i).css('backgroundColor', '#f5f5f5'); 
    } 
}