在實際項目開發中，有些開發出來的報表的數據量是比較大的，或者是多維度的大數據分析報表，在這個時候，爲了觀察方便，我們一般會對報表進行底色區分，改變每個隔行的顏色，方便用戶對報表數據進行閱讀。
然而，有些應用場景中，隔行區分顏色不一定能滿足閱讀的需求，或報表頁面中有分模塊的顏色區分，此時用隔行顏色差對頁面的色彩佈局影響不是很好；用戶實際應用時，希望的是在用戶點擊單元格時，改變當前單元格所在行的背景顏色，直接提示用戶當前點擊所在行，方便在一些大布局的數據報表中，左右拉動報表也可以快速鎖定自己需要準確預覽的數據。
以上的應用場景，我們可以通過JS事件，點擊行改變顏色，讓用戶在進行報表預覽時，點擊單元格後，改變當前行的顏色，方便用戶鎖定關注的數據。
1、報表界面設計：
2、javascripts事件編輯：
在模板web屬性處，添加加載結束事件，代碼如下：
$('.tar').click(function(e){
$('.tar').css({"background":"#fff"});
if($(e.target).hasClass('tar')){
$('.selecttr').css({"background":"#fff"});
$('.selecttr').removeClass('selecttr')
$(e.target).closest('tr').find('td').addClass('selecttr').css({"background":"#e9e9e9"});
}
})
3、效果圖：
如上所示，添加相應的JS事件，就可以實現點擊行時改變顏色的效果，讓用戶在進行報表預覽時，點擊單元格後，改變當前行的顏色，方便用戶鎖定關注的數據。
在項目實際開發中，也會有其他的應用場景，如鼠標點擊時，改變當前單元格顏色；鼠標移上時，改變當前單元格顏色；鼠標移出時，改變當前單元格顏色等等，這裏也將這些應用場景的JS事件一一列出：
//鼠標點擊：
$('.linkspan').mousedown(function(){$(this).css('color','#C0C0C0');});
//鼠標移上：
$('.linkspan').mouseover(function(){$(this).css('color','red');});
//鼠標移出：
$('.linkspan').mouseleave(function(){$(this).css('color','blue');});