在实际项目开发中，有些开发出来的报表的数据量是比较大的，或者是多维度的大数据分析报表，在这个时候，为了观察方便，我们一般会对报表进行底色区分，改变每个隔行的颜色，方便用户对报表数据进行阅读。
然而，有些应用场景中，隔行区分颜色不一定能满足阅读的需求，或报表页面中有分模块的颜色区分，此时用隔行颜色差对页面的色彩布局影响不是很好；用户实际应用时，希望的是在用户点击单元格时，改变当前单元格所在行的背景颜色，直接提示用户当前点击所在行，方便在一些大布局的数据报表中，左右拉动报表也可以快速锁定自己需要准确预览的数据。
以上的应用场景，我们可以通过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');});