jquery實現表格中懸停背景色和選中行變色

HTML代碼

 <table id="msgtable" class="fixed_headers table  table-bordered " >
          <thead>
            <tr>
              <th ><s:text name="smsc.sigtrace.seq" /></th>
              <th><s:text name="smsc.sigtrace.module" /></th>
              <th><s:text name="smsc.sigtrace.event" /></th>
              <th><s:text name="smsc.sigtrace.eventdesc" /></th>
              <th><s:text name="smsc.sigtrace.direction" /></th>
              <th><s:text name="smsc.sigtrace.time" /></th>
            </tr>
          </thead>
          <tbody>
          </tbody>
        </table>

CSS代碼

<style>
.tr_hover{background-color:#47C240} /* 鼠標懸停上的背景色 */
.selected{background-color: #51b2f6} /* 選中行變色 */
</style>

js代碼

$(document).on('messageReceived',function(e, data){
	try{
	    $.each(data, function(i, rowData){
	       $('#msgtable').messageTable('appendData', [rowData]);
	    });
	}catch(ex){
		JSTOOL.debug(ex);
	};

	//鼠標滑動，行色變化
	$('tr:gt(0)').mouseover(function(){
		$(this).addClass('tr_hover');           //通過jQuery控制實現鼠標懸停上的背景色，無視標題行用:gt(0)
	}).mouseout(function(){
		$(this).removeClass('tr_hover');       //通過jQuery控制實現鼠標懸停上的背景色
	});

	//選中行變色
	$(function () {
		$('tbody>tr').click(function () {
			$(this).addClass('selected')      //爲選中項添加高亮
					.siblings().removeClass('selected')//去除其他項的高亮形式
					.end();
		});
	});
});