js实现改变表单中鼠标点击/悬停所在行的样式
1. 描述
如何实现表单中鼠标点击，或者经过到指定行的时候，该行的行高，字体大小，颜色等改变的功能？
如下图所示，鼠标经过指定行，该行字体变大，背景色变为红色，点击时背景色变为黄色：
2. 示例
2.1 模板样式
新建表单，拖入报表块，添加内置数据集ds1:
双击报表块，将字段拖入报表块，样式设计如下：
2.2 js事件设置
选中报表块，点击右侧事件标签，添加初始化后事件：
js代码如下：
setTimeout(function() { //鼠标经过
$(".x-table tr").mousemove(function() {
//所在行背景色:红色
$(this).css("background-color","red");
//所在行单元格字体:30px
$(this).find("td").css("font-size","30px");
});
//鼠标点击
$(".x-table tr").mousedown(function() {
//所在行背景色:黄色
$(this).css("background-color","yellow");
//所在行单元格字体:20px
$(this).find("td").css("font-size","20px");
});
//鼠标离开
$(".x-table tr").mouseout(function() {
//所在行背景色:白色
$(this).css("background-color","white");
//所在行单元格字体:12px
$(this).find("td").css("font-size","12px");
})
},1000);
保存模板，点击预览，效果即如上。
附件列表
主题： 二次开发
标签：
已验证