layui Table更改当前行背景色及联动表格内的checkbox多选框

最新推荐文章于 2023-03-26 17:48:43 发布

原创最新推荐文章于 2023-03-26 17:48:43 发布 · 839 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #javascript #前端 #程序人生 #经验分享

css 同时被 2 个专栏收录

2 篇文章

订阅专栏

layui

1 篇文章

订阅专栏

本文介绍了一个使用layui框架实现的表格行点击事件处理方法。通过监听表格行的点击事件，可以改变行的背景颜色，并触发复选框状态切换。此功能适用于需要在表格中进行交互操作的应用场景。

$(document).on("click",".layui-table-body table.layui-table tbody tr",function(){
		        var obj = event ? event.target : event.srcElement;
		        var tag = obj.tagName;
		        var checkbox = $(this).find("td div.laytable-cell-checkbox div.layui-form-checkbox I");
		        if(checkbox.length!=0){
		            if(tag == 'DIV') {
		                checkbox.click();
		            }
		        }
		        console.log(this);
	            var data_index=$(this).attr('data-index');//得到当前的tr的index
	            console.log($(this).attr('data-index'));
	            $(".layui-table-body tr").attr({"style":"background:#FFFFFF"});//其他tr恢复颜色
	            $(".layui-table-body tr[data-index="+data_index+"]").attr({"style":"background:#f3f1b9"});//改变当前tr颜色
		        
		    });
		    $(document).on("click","td div.laytable-cell-checkbox div.layui-form-checkbox",function(e){
		        e.stopPropagation();
		    });